Table rows that have
This behavior has to do with how are tables treated on browsers.
table element is set as
tr is a
display:table-row, and the
display:table-cell. It works the same if you are creating a div based css table.
On this fiddle: http://jsfiddle.net/rv4v2964/1/, I've created the same basic example, but with divs instead, and added a
block element nested to the table, but off any row or cell.
You can notice that it stays limited to the first cell's width. One reason is stated in this article:
...the table and column widths are set by the widths of table and col elements or by the width of the first row of cells...
Meaning that when an element is odd to the table structure, the first cell's width set the value for the entire column. This is actually a
table-layout behaviour specified on W3:
...a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column...
Another article mentions different behaviors on each browser on how to threat elements that are off the table structure. http://snook.ca/archives/html_and_css/getting_your_di
Browsers don't like when you create table, and place inside it elements that are not supposed to be there. It is likely to me rendered wrongly. It will take in count the first cell's width as its parameter.
On this specific case, a workaround may be setting the display as
display: table-caption; that takes the whole width of the table. Then, setting the property
bottom, it will stay in the bottom of the table.
See here: http://jsfiddle.net/rv4v2964/2/