CSS table-cell ignores width, even with table-fixed

Question

I'd like to have a div with display: table-cell that has a percentage width set. display: table-cell is my best option I need several side by side divs to be equal height.

After researching, I properly set the parent to display: table; table-layout: fixed; width: 100% as found in many other threads, but the table-cell still fills the parent.

.table-wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.table-cell {
  display: table-cell;
  width: 25%;
  overflow: hidden !important;
  border: 1px solid black;
}

<div class="table-wrapper">
  <div class="table-cell">
    Should be 25%, but it fills .table-wrapper
  </div>
</div>

Is this not possible?

Etheryte · Answer 1 · 2015-02-05T22:46:59.303

5

You can work around this using a single block element.

.table-wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
  border: 1px solid green;
}

.table-cell {
  display: table-cell;
  width: 25%;
  overflow: hidden !important;
  border: 1px solid black;
}

<div class="table-wrapper">
  <div class="table-cell">
    Should be 25%, but it fills .table-wrapper
  </div>
  <div><div/>
</div>

edited Feb 05 '15 at 22:46

answered Feb 05 '15 at 22:38

Etheryte

24,589
11
71
116

score -1 · Answer 2 · answered Feb 05 '15 at 22:39

A tag will ALWAYS fill it because there is a carriage return on the end of every ...which is pretty sneaky of them to do that w/out any documentation for it! But, nevertheless it's THAT WAY. So, i'd recommend using a tag that does NOT have a carriage return tacked onto the end. Hope that reduces some frustration...i had to learn the hard way!

CSS table-cell ignores width, even with table-fixed

2 Answers2