Max-height of table-cell

Question

How to set the height of a table cell? It is not a good solution to set the display:block and overflow: hidden to #table. #table-cell1 and #table-cell2 (and the whole table of course) should be 30px. How to solve?

The div is resized the same if there is so much text. In this case the height of #table-cell2 is 100px, should remain fixed to 30px even if there is so much text!

See fiddle at: http://jsfiddle.net/HPtB2/1

score 5 · Accepted Answer · answered Aug 23 '13 at 14:03

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/

Ummm...Why didn't you use a table here? – Kraken Feb 24 '17 at 14:52 — Kraken, Feb 24 '17 at 14:52

SaturnsEye · Answer 2 · 2013-08-23T14:06:26.443

1

remove the <br> from your html

<div id="table-cell2">table cell 2  Table  Cell</div>

Add:

div {    
 white-space:nowrap;
    }

edited Aug 23 '13 at 14:06

answered Aug 23 '13 at 14:01

SaturnsEye

6,297
10
46
62

That's why your text is dropping down – SaturnsEye Aug 23 '13 at 14:01
The div is resized the same if there is so much text. In this case the height of #table-cell2 is 100px, should remain fixed to 30px even if there is so much text! http://jsfiddle.net/HPtB2/1/ – user2711086 Aug 23 '13 at 14:04

score 0 · Answer 3 · answered Aug 23 '13 at 13:45

0

Is this what you're after? you are very vague

#table-cell1{
display: table-cell;
width: 80px;
height:200px;
background-color: yellow;
}

answered Aug 23 '13 at 13:45

SaturnsEye

6,297
10
46
62

Thanks you for replace, but it does not work, try putting 30px instead of 200px. – user2711086 Aug 23 '13 at 13:50
do you want all of your text across the one line instead of dropping down? – SaturnsEye Aug 23 '13 at 13:52
Yes, the height should not downsize! – user2711086 Aug 23 '13 at 13:56

score 0 · Answer 4 · edited May 23 '17 at 12:00

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

This answer does not answer the OP's question and is overkill — Adam Buchanan Smith, Aug 12 '15 at 23:15

Max-height of table-cell

4 Answers4

How to Fix a Height in a Table Cell