CODEWITHSUNDEEP
htmlcss
skyisred
skyisred

Reputation: 7105

How to set maximum height for table-cell?

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

Upvotes: 86

Views: 139238

Answers (10)

Itamar
Itamar

Reputation: 925

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;
}

Upvotes: 6

ǝlpoodooɟƃuooʞ
ǝlpoodooɟƃuooʞ

Reputation: 516

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.

Upvotes: 0

ahmed
ahmed

Reputation: 41

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>

Upvotes: 0

Rups
Rups

Reputation: 639

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>

Upvotes: -1

Jarett Lloyd
Jarett Lloyd

Reputation: 135

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>

Upvotes: -1

Mr. Rick
Mr. Rick

Reputation: 155

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

Upvotes: 0

beipawel
beipawel

Reputation: 433

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>

Upvotes: 9

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

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).

Upvotes: 170

Rahul Tripathi
Rahul Tripathi

Reputation: 172448

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;
}

Upvotes: 1

vels4j
vels4j

Reputation: 11298

Try

   <td style="word-wrap: break-word">Long text here</td>

Upvotes: -1

Related Questions