CODEWITHSUNDEEP
csshtmlcss-tables
codneto
codneto

Reputation: 2469

Why block element children inside css tables dont take 100% width?

If I add block elements inside a display: table; element, they dont expand to 100% width of table, but instead expand to 100% width of first column of table. If I manually add a greater non-percent "px" width value to this block element, it also causes the first column of the table to expand wider with it. Happens regardless of the position of this block element (top or bottom).

I have a fiddle to convey the point: https://jsfiddle.net/ugdre5s9/1/. Notice that the .table-caption-div element at top and .full-width-row element at bottom and middle of rows are not expanding beyond first column width. I tried wrapping these elements in display: table-row; but that didnt help either.

How do I then insert an element as child of display: table; node that will expand to full 100% width?

Upvotes: 2

Views: 105

Answers (1)

BoltClock
BoltClock

Reputation: 723598

The block is being placed in an anonymous table cell that spans a single column.

You can't specify how many rows or columns a cell box should span in CSS. This is one of the biggest limitations of the CSS table model. But in your fiddle you can make the problem go away completely by just using a table and replacing your .table-caption-div with an actual caption element, because what you have there is a table, and should be marked up as such instead of a bunch of semantically meaningless divs (well, other than the full-width rows, which should be completely separate elements altogether, not shoehorned into the table as though they were part of the tabular data).

Upvotes: 1

Related Questions