Menu
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?
516
You need to set the margin of the body to 0 for the table to stretch the full width. Alternatively, you can set the margin of the table to a negative number as well. Save this answer.
To set the table width in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property width.
<html style="height: 100%;"> <body style="height: 100%;"> <table style="height: 100%;"> ... in order to force all parents of the table element to expand over the available vertical space (which will eliminate the need to use absolute positioning). Save this answer.
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
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
