CODEWITHSUNDEEP
htmlcss
simPod
simPod

Reputation: 13456

CSS display table doesn't respect fixed height

I have this CSS layout which is necessary, cannot be changed so it preserves its middle centring.

Div display:table (height defined) with one div inside display:table-cell, both vertical-align:middle; (I use that for vertically centring of the content). The problem is that when the content overflows the defined height, it simply overflows the table, making it bigger.

I need to set something like overflow:hidden which doesn't seem to work with tables... I just need to hide the overflowing content or better, add scrollbar to table. Is there a way?

CSS

html,body {
  height: 100%;
}
.table {
  float:left;
  margin: 10px;
  display:table;
  height:500px;
  vertical-align:middle;
  background:#ccc;
}
.table-cell {
  vertical-align:middle;
  display:table-cell;
}

HTML

<div class="table">
  <div class="table-cell">
    some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>
  </div>
</div>
<div class="table">
  <div class="table-cell">
    some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>
  </div>
</div>

Codepen: http://codepen.io/anon/pen/lytea

Upvotes: 13

Views: 20075

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

The easiest way to do this is to wrap your content with a inline-block level element with max-height 100%, and, you need to set height: inherit on the table-cell elements.

html,body {
  height: 100%;
}
.table {
  float:left;
  margin: 10px;
  display:table;
  height:500px;
  vertical-align:middle;
  background:#ccc;
}
.table-cell {
  height: inherit;
  vertical-align:middle;
  display:table-cell;
}
.wrapper {
  border: 1px dotted blue;
  display: inline-block;
  max-height: 100%;
  overflow: auto;
}
<div class="table">
  <div class="table-cell">
    <div class="wrapper">
    some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>
</div>
    </div>
</div>
<div class="table">
  <div class="table-cell">
    <div class="wrapper">
    some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>some tall content
    <br>
      </div>
  </div>
</div>

Upvotes: 7

SULTAN
SULTAN

Reputation: 1159

you need to use text-overflow: ellipsis; in your .table-cell like this

white-space: nowrap;
overflow: auto;
text-overflow: ellipsis;

please try the above css

P.S. to get the text-overflow: ellipsis; it require the white-space and the overflow properties.

overflow can be either auto or scroll or hidden.

Upvotes: 2

Related Questions