Table rows that have display: block are unable to get 100% width of the parent table, when they have display: table-row they naturally get 100% width but that CSS value has some other side effects which I try to avoid at the moment.
Plunker that demonstrate the problem.
What causes table rows to act like this and not like normal block level elements?
Best Solution
This behavior has to do with how are tables treated on browsers.
The
tableelement is set asdisplay:table. Thetris adisplay:table-row, and thetdisdisplay: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
blockelement 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:
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-layoutbehaviour specified on W3:http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout
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
CONCLUSION
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 propertycaption-sideasbottom, it will stay in the bottom of the table.See here: http://jsfiddle.net/rv4v2964/2/
Reference: http://www.tagindex.net/css/table/caption_side.html