CODEWITHSUNDEEP
htmlcss
Robin Andersson
Robin Andersson

Reputation: 5380

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

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?

Upvotes: 17

Views: 35253

Answers (2)

LcSalazar
LcSalazar

Reputation: 16831

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

Upvotes: 23

Dikesh Patel
Dikesh Patel

Reputation: 11

Simply put the table in div with class "table-responsive" like this

<div class="table-responsive">
<table class="table"></table>
</div>

Upvotes: -4

Related Questions