Works in WebKit and IE as far as I can tell. Firefox seems to be the only one who doesn't like it on table-cells. And yes, I'm trying to position elements inside of the <td> without having to rely on floats.
–
Ben JohnsonFeb 28 '11 at 22:18

2

Again, look at Justin's answer. It works just fine in Firefox if you tell Firefox that you're treating it as a block rather than as a table element.
–
T.J. CrowderFeb 28 '11 at 22:19

+1 This is the only solution that worked for me. Using tr {display:block} completely ruins the layout.
–
Wesley MurchDec 14 '11 at 21:30

+1 This is the answer for me as well. display: block isn't enough of a fix on complex table layouts. The extra div is solution that is more reliable.
–
DA.Apr 18 '12 at 4:49

5

but, with this solution "width" and "height" still can't be used
–
4esn0kMay 16 '12 at 7:58

@4esn0k did you find a solution where you can use width and height?
–
NeilJun 20 '12 at 14:40

9

Unfortunately, your solution does not work if you add another column with more content in it than in the other one. So I do not understand the "accepted answer" flag and the much appreciation given by the votes up. Please check jsfiddle.net/ukR3q
–
JanApr 29 '13 at 17:05

The downside to setting display: block seems to be that it can really mess with table formatting if it's applied directly to the element. Because it's changing it from table-cell... or am I crazy?
–
Ben JohnsonFeb 28 '11 at 22:15

3

@Ben: Well, yeah. Setting position on a table cell is, by definition, seriously changing the table formatting. You take the cell's block out of the flow (except for position: relative, where it stays in the flow but offsets from it).
–
T.J. CrowderFeb 28 '11 at 22:16

2

@Ben - Nope, not crazy. You'll definitely have to do some more work to get things looking the way you want. The point is merely that it is possible.
–
Justin NiessnerFeb 28 '11 at 22:17

Since every web browser including Internet Explorer 7, 8 and 9 correctly handle position:relative on a table-display element and only FireFox handles this incorrectly, your best bet is to use a JavaScript shim. You shouldn't have to rearrange your DOM just for one faulty browser. People use JavaScript shims all the time when IE gets something wrong and all the other browsers get it right.

Here is a completely annotated jsfiddle with all the HTML, CSS, and JavaScript explained.

My jsfiddle example above uses "Responsive Web Design" techniques just to show that it will work with a responsive layout. However, your code doesn't have to be responsive.

Here is the JavaScript below, but it won't make that much sense out of context. Please check out the jsfiddle link above.

$(function() {
// FireFox Shim
// FireFox is the *only* browser that doesn't support position:relative for
// block elements with display set to "table-cell." Use javascript to add
// an inner div to that block and set the width and height via script.
if ($.browser.mozilla) {
// wrap the insides of the "table cell"
$('#test').wrapInner('<div class="ffpad"></div>');
function ffpad() {
var $ffpad = $('.ffpad'),
$parent = $('.ffpad').parent(),
w, h;
// remove any height that we gave ffpad so the browser can adjust size naturally.
$ffpad.height(0);
// Only do stuff if the immediate parent has a display of "table-cell". We do this to
// play nicely with responsive design.
if ($parent.css('display') == 'table-cell') {
// include any padding, border, margin of the parent
h = $parent.outerHeight();
// set the height of our ffpad div
$ffpad.height(h);
}
}
// be nice to fluid / responsive designs
$(window).on('resize', function() {
ffpad();
});
// called only on first page load
ffpad();
}
});

I'm getting this answer in my google results as i searched for the "position: relative" not working on table cells in Firefox. (just to align a child element inside the table cell)
My solution was to put a wrapping div inside the td which i gave "position: relative".
This is not harming your table layout like when putting "display: block" on the table cell.

Try using display:inline-block it worked for me in Firefox 11 giving me positioning capability within the td/th without destroying the layout of the table. That in conjunction with position:relative on a td/th ought to make things work. Just got it working myself.