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的浏览器。（虽然我不确定这是否是一个很好的解决方案。）

如何制作固定大小的表格单元格而不管其内容如何

1 个答案: