Question

I have a table which contains dynamic content so the height of each row is varying – what I want is to fix the height of the table irrespective of the content. The content can be any length and can also have images.

I tried the following in CSS:

table {
  border-collapse: collapse;
}
table td {
  border: 1px solid #ccc;
  padding: 4px;
}
table td:nth-child(2n+2) {
  width: 200px;
}
table td:last-child {
  width: 100px;
}
table tr {
  height: 80px;
  display: block;
  overflow: auto;
  background-color: red;
  border: 2px solid #ccc;
}

<table>
  <tr>
    <td>content1</td>
    <td>content 2</td>
    <td>content 3</td>
  </tr>
  <tr>
    <td>content1</td>
    <td>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</td>
    <td></td>
  </tr>
  <tr>
    <td>content1</td>
    <td></td>
    <td>content 3</td>
  </tr>
</table>

It worked fine but when there was no content in any of the cells, or if content reduces a cell, it collapses. Here is the fiddle

Answer 1

You could use something like (example):

table td
{
    width: 60px;
    height: 60px;
    display: inline-block;
    overflow: auto;
}​

with browsers that support inline-block. (Altho I’m not sure if this is a good solution.)