We would like to know how to align the height of div table cells.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {<!-- w w w.j a va 2 s . c o m-->
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: 40px;
overflow: auto;
}
</style>
</head>
<body>
<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>
</body>
</html>
The code above is rendered as follows: