Apparently, the only pure CSS solution is to set display:block on the tr (including implicitly via use of float). However, this severely breaks table layouts and didn't work out very well for me.
I decided to bite the bullet and wrap the content of the cell in a div, as suggested in these answers:
- https://stackoverflow.com/a/8312358/398242
- https://stackoverflow.com/a/7629567/398242
|
|
This still has a disadvantage: since our position:relative element must be inside a table cell, it only works in the last cell of the table row (when the goal is to have the absolute element positioned relative to the entire row, in the top right corner). This also doesn't seem to position the element correctly as seen here: http://jsfiddle.net/QU2zT/25/
This seems to be the best we can do, without abandoning table markup or breaking it's rendering.
