Why don't absolutely positioned tables calculate width / height based on their top / left / right / bottom values?

Question

I have an external <div> that is relatively positioned and has a specific size. Inside it, I have a <table> object that is absolutely positioned and top , left , right and bottom set to zero. I expected the table to be expanded to comply with the restrictions of top / left / right / bottom, however this is not what happens. Instead, table sizes are calculated based on its contents.

If I use the internal <div> instead of <table> , then it works as I expected. On the other hand, if I put display: table; into the internal <div> , then it behaves exactly like a table.

My question is: why is this happening? Where in the specifications is this behavior defined? Or is this a bug in browsers (very unlikely)?

I checked the CSS 2.1 specification , I read sections 9.7. Relations between "display", "position" and "swimming" , 10.3.7 Absolutely positioned, not replaced elements , 17 tables . I also checked the CSS attribute on the Mozilla Developer Network . I also searched on StackOverflow. And yet, I cannot find an explanation of why tables behave this way.

See the demo version: http://jsfiddle.net/LgCDE/2/ I can reproduce the results on both Chrome 27 and Firefox 20.0.

HTML:

 <div class="box"> <table class="table"> <tr> <td>Hey!</td> </tr> </table> </div> <div class="box"> <div class="table">Hey!</div> </div> <div class="box"> <div class="table" style="display: table;">Hey!</div> </div> 

CSS

 div.box { position:relative; border: 2px dashed red; background: #800; width: 100px; height: 50px; } .table { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; margin: 0; border: 3px double blue; background: #CCF; table-layout: fixed; border-collapse: collapse; } 

Answer 1

The answer, I believe, lies in the CSS2.1 specifications, in particular Section 17.5.2: Table Width Algorithms: the table-layout property (emphasis mine):

Note that this section overrides the rules that apply to width calculation, as described in section 10.3. In particular, if the table fields are set to "0" and the width is set to "auto", the table will not automatically fill in its containing block . However, as soon as the calculated “width” value for the table is found (using the algorithms below or, if necessary, some other UA-dependent algorithm), then the other parts of section 10.3 apply. Therefore, for example, the table can be centered using the "auto" fields on the left and right.

As you noted, with width set to auto , the width will be based on the content, not the containing block.

There is also this line at the end of this section, although I assume that this has not happened yet:

Future CSS updates may introduce ways to automatically transform tables into blocks.

Answer 2

I could not find any technical reason, but I think it makes sense when you think about what the table should be. The default display for a div is a block, a piece of content. Thus, the default value is 100%. The table simply expands to your content.

In your example, if you set the .table value to 100%, it will act the same.