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>

它工作得很好，但是当任何单元格中没有内容时，或者如果内容减少了一个单元格，它就会崩溃。这是小提琴

Answer 1

您可以使用类似（示例）的内容：

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

使用支持inline-block. （尽管我不确定这是否是一个好的解决方案。）