html - 如何制作固定大小的表格单元格而不考虑其内容

Question

我有一个包含动态内容的表格，因此每行的高度都在变化 - 我想要的是固定表格的高度而不考虑内容。内容可以是任意长度，也可以有图片。

我在 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>

它工作正常，但是当任何单元格中都没有内容时，或者如果内容减少了一个单元格，它就会崩溃。这是 fiddle

Answer 1

您可以使用类似 ( example ) 的内容:

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

使用支持 inline-block 的浏览器。 (虽然我不确定这是否是一个好的解决方案。)