Max-height of table-cell - html

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

Answer 1

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/

Answer 2

remove the <br> from your html
<div id="table-cell2">table cell 2 Table Cell</div>
Add:
div {
white-space:nowrap;
}

Answer 3

Is this what you're after? you are very vague
#table-cell1{
display: table-cell;
width: 80px;
height:200px;
background-color: yellow;
}

Answer 4

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