Setting Max-Height for Table Cell Contents

Setting max-height for table cell contents

We finally found an answer of sorts. First, the problem: the table always sizes itself around the content, rather than forcing the content to fit in the table. That limits your options.

We did it by setting the content div to display:none, letting the table size itself, and then in javascript setting the height and width of the content div to the inner height and width of the enclosing td tag. Show the content div. Repeat the process when the window is resized.

How to set maximum height for table-cell?

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

Max-height of table-cell

When the height property is applied to table cells (whether using native tags like <td> or CSS enabled like display: table-cell), it is interpreted as a minimum value.

A table cell's height will expand as needed to accommodate the content, and that will in turn, determine the height of the table row containing the cell.

Reference: http://www.w3.org/TR/CSS2/tables.html#height-layout

How to Fix a Height in a Table Cell

One way of set a fixed height within a table cell is by using a wrapper for the table cell's content:

<div id="table">
    <div id="table-cell1">
        <div class="inner-cell">table cell 1</div>
    </div>
    <div id="table-cell2">
        <div class="inner-cell">table cell 2
            <br/>Table
            <br/>Cell</div>
    </div>
</div>

and apply the following CSS:

body {
    margin: 0
}
#table {
    display: table;
    width: 100%;
    height: 30px;
    /* ignored */
}
#table-cell1 {
    display: table-cell;
    width: 80px;
    background-color: yellow;
}
#table-cell2 {
    display: table-cell;
    background-color: gray;
    color: white;
}
.inner-cell {
    border: 1px dashed blue;
    height: 30px;
    overflow: auto; /* optional: if needed */
}

The trick is to set a fixed (or max) height value for the block level container .inner-cell.

You can also set the overflow property if you need scroll bars and so on.

See demo fiddle: http://jsfiddle.net/audetwebdesign/mNcm5/

Setting a max height on a table

NOTE this answer is now incorrect. I may get back to it at a later time.

As others have pointed out, you can't set the height of a table unless you set its display to block, but then you get a scrolling header. So what you're looking for is to set the height and display:block on the tbody alone:

<table style="border: 1px solid red">
    <thead>
        <tr>
            <td>Header stays put, no scrolling</td>
        </tr>
    </thead>
    <tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
        <tr>
            <td>cell 1/1</td>
            <td>cell 1/2</td>
        </tr>
        <tr>
            <td>cell 2/1</td>
            <td>cell 2/2</td>
        </tr>
        <tr>
            <td>cell 3/1</td>
            <td>cell 3/2</td>
        </tr>
    </tbody>
</table>

Here's the fiddle.

CSS Table set max row height

The problem is that when you fake a table in CSS, the elements don't all take on all properties that a real table would have. If you were to rewrite this as a real table, the problem wouldn't exist.

table {  border-spacing: 10px;  width: 300px;}td {  height: 50px;  background: yellow;}.table-cell-inner {  height: 50px;  max-height: 50px;  overflow: hidden;}.big {  font-size: 50px;}

<table>  <tr>    <td>      <div class="table-cell-inner">Test</div>    </td>    <td>      <div class="table-cell-inner big">Test</div>    </td>  </tr></table><div style="height: 50px; background: red;">Reference: This is 50px height.</div>

How to add a fixed height to a table cell?

table-cells won't work with overflow: hidden. Just wrap content in table-cell in div with max-height and overflow: hidden

tbody tr td div{
  max-height: 30px;
  overflow: hidden;
}

How to set a maximum height for an HTML table?

You can set the height of your table as the height of whole viewport to have everytime the maximum height and adjust the width of the colums by adding the style css code in the header

<!DOCTYPE html>
<html>
<head>
<style>
table{
    height:100vh;
}
td,th {
    border: 1px solid #000;
}
tr td:last-child {
    width: 1%;
    white-space: nowrap;
}
</style>
</head>
<body>
    <div class="tables">
      <table>
      <tr>
        <th>Name</th>
        <th>Industry</th>
                <th>Does the company identify that climate-related performance is factored into the overall board or executive leadership compensation</th>
        <th>Last updated</th>
      </tr>
      <tr>
        <td>BP</td>
        <td>Oil & Gas</td>
        <td>Yes</td>
        <td>2020-11-28</td>
      </tr>
      </table>
    </div>
</body> 
</html>

With this, you fill the width and the viewport height.

You shall take away height:100vh; if you do not want to fill the whole viewport height.

Like this :

or you can do :

tr td:last-child {
    overflow: hidden;
}

to obtain the display below (but this will not fill the whole width of the viewport instead of the first display)

How to set height of table cell display: table-cell

Use the following css..It will work for your requirement

td,th{ 
height:25px; 
}

---

Related Topics