83

I got a table-cell with fixed width and height and if text is too large, cell size should remain the same and text should be hidden by overflow:hidden.

div {
   display: table-cell
   height: 100px;
   width: 100px;
   overflow: hidden;
   vertical-align: middle;
}

Table-cell, however, expands beyond 100px if too much text is added. Any tricks to prevent it from expanding?

Text should be several lines in length, so "white-space:nowrap" solution is not applicable

skyisred
  • 6,855
  • 6
  • 37
  • 54
  • 1
    possible duplicate of [Setting max-height for table cell contents](http://stackoverflow.com/questions/7045653/setting-max-height-for-table-cell-contents) – user56reinstatemonica8 Apr 25 '14 at 09:26

10 Answers10

166

By CSS 2.1 rules, the height of a table cell is “the minimum height required by the content”. Thus, you need to restrict the height indirectly using inner markup, normally a div element (<td><div>content</div></td>), and set height and overflow properties on the the div element (without setting display: table-cell on it, of course, as that would make its height obey CSS 2.1 table cell rules).

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
9

I don't think that the accepted answer actually fully solves the problem. You wanted to have a vertical-align: middle on the table-cells content. But when you add a div inside the table-cell and give it a height the content of that inner DIV will be at the top. Check this jsfiddle. The overflow:hidden; works fine, but if you shorten the content so that it's only one line, this line won't be centered vertically

The solution is not to add a DIV inside the table-cell but rather outside. Here's the Code:

/* some wrapper */
div.d0 {
    background: grey;
    width:200px;
    height: 200px;
}

div.table {
    margin: 0 auto; /* just cosmetics */
    width: 150px;
    height: 150px;
    background: #eee;
    display: table;
}

div.tablecell {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    height: 100%;
    width: 100%;
    background: #aaa;
}

div.outer-div {
    height: 150px;
    overflow: hidden;
}
<div class="d0">
    <div class="outer-div">
        <div class="table">
            <div class="tablecell">
                Lorem ipsum 
                <!--dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,-->
            </div>
        </div>
    </div>
</div>
beipawel
  • 443
  • 4
  • 15
  • How to set `height:50%` for `tablecell` – EmptyData Oct 05 '15 at 03:47
  • @EmptyData it's a while back since I wrote this, but it doesn't make sense to set a `tablecell` to 50% of the row-height. In my example you can actually leave out the `height: 100%` for the `tablecell` and it would still work. But a table cell cannot be half of the table row. Maybe you mean something like `rowspan`? I would need to find out myself first, how this works, but maybe there are some answers to that on stackoverflow already... good luck – beipawel Oct 23 '15 at 05:03
6

You can do either of the following:

  1. Use CSS property line-height and set it per table row (<tr>), this will also vertically center the content within <td>

  2. Set <td> CSS property display: block and as the following:

td 
{
  display: block;
  overflow-y: hidden;
  max-height: 20px;
}
Tim R
  • 2,622
  • 1
  • 3
  • 19
Itamar
  • 885
  • 1
  • 9
  • 17
1

Try something like this:-

 table {
    width: 50%;
    height: 50%;
    border-spacing: 0;
    position:absolute;
}
td {
    border: 1px solid black;
}
#content {
    position:absolute;
    width:100%;
    left:0px;
    top:20px;
    bottom:20px;
    overflow: hidden;
}
Rahul Tripathi
  • 168,305
  • 31
  • 280
  • 331
  • 1
    Ouch! It worked perfectly in Fiddle, but when I tried adding it into my code, it broke vertical-align: middle. Alignment was the reason for using table-cell. Sorry that I forgot to mention it in the question – skyisred Dec 02 '12 at 09:52
  • 1
    tables should not be used for creating the general layout of the website... this is 90s style – IceFire Nov 18 '15 at 10:11
0

In css you can't set table-cells max height, and if you white-space nowrap then you can't break it with max width, so the solution is javascript working in all browsers.

So, this can work for you.

For Limiting max-height of all cells or rows in table with Javascript:

This script is good for horizontal overflow tables.

This script increase the table width 300px each time, maximum 4000px until rows shrinks to max-height(160px) , and you can also edit numbers as your need.

var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
    while (row.offsetHeight > 160 && j < 4000) {
        j += 300;
        table.style.width = j + 'px';
    }
}

Source: HTML Table Solution Max Height Limit For Rows Or Cells By Increasing Table Width, Javascript

Community
  • 1
  • 1
Mr. Rick
  • 155
  • 1
  • 14
0

if you are using display:table-cell, max-height will not work for div of this style. so the solution which worked for me is to set the max height of inner div 

<div class="outer_div" style="display:table">

    <div class="inner_div" style="display:table-cell">
        <img src="myimag.jpg" alt="" style="max-height:300px;width:auto"/>
    </div>
    <div class="inner_div" style="display:table-cell">
        <img src="myimag2.jpg" alt="" style="max-height:300px;width:auto"/>
    </div>

</div>
Oshan Wisumperuma
  • 1,808
  • 1
  • 18
  • 32
ahmed
  • 41
  • 4
0

In my case with the table in a flexbox setting the height of the table to height: fit-content; did the trick. This way the table can do what its supposed to do.

ǝlpoodooɟƃuooʞ
  • 506
  • 4
  • 17
-1

Try

   <td style="word-wrap: break-word">Long text here</td>
vels4j
  • 11,208
  • 5
  • 38
  • 63
-1

Use the style below:

div {
  display: fixed;
  max-height: 100px;
  max-width: 100px;
  overflow: hidden;
}

With the HTML being:

<div>
    your long text here
</div>
chazsolo
  • 7,873
  • 1
  • 20
  • 44
Rups
  • 629
  • 1
  • 8
  • 19
-1

Might this fit your needs?

<style>
.scrollable {
  overflow-x: hidden;
  overflow-y: hidden;
  height: 123px;
  max-height: 123px;
}
</style>

<table border=0><tr><td>
  A constricted table cell
</td><td align=right width=50%>
  By Jarett Lloyd
</td></tr><tr><td colspan=3 width=100%>
  <hr>
  you CAN restrict the height of a table cell, so long as the contents are<br>
  encapsulated by a `&lt;div>`<br>
  i am unable to get horizontal scroll to work.<br>
  long lines cause the table to widen.<br>
  tested only in google chrome due to sheer laziness - JK!!<br>
  most browsers will likely render this as expected<br>
  i've tried many different ways, but this seems to be the only nice way.<br><br>
</td></tr><tr><td colspan=3 height=123 width=100% style="border: 3px inset blue; color: white; background-color: black;">
  <div class=scrollable style="height: 100%; width: 100%;" valign=top>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
    is this suitable??<br>
  </div>

Jarett Lloyd
  • 125
  • 1
  • 8