Why does not display:block and 100% width work on table rows?

This behavior has to do with how are tables treated on browsers.

The table element is set as display:table. The tr is a display:table-row, and the td is 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:

http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout

...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

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 property caption-side as bottom, 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