CSS - tr 上的固定高度和桌子上的固定高度？

Question

我需要有具有固定高度的行的表，并且该表本身必须具有固定高度。例如，所有行的高度均为 8 像素，表格的高度为 400 像素。如果行数少于表格的总高度，那么表格的剩余部分应该像一个缺口。

但是如果我在表格上设置固定高度，CSS 会自动重新调整行高。

我需要表格看起来像这样：

 |row  |cont  |
|row  |cont  |
|row  |cont  |
|            |
|            |
|            |
|End of table|

我试过这个：

CSS：

 .t-table {
  border: 1px solid black;
  height: 400px;
  border-collapse: collapse;
}
td {
  border: 1px solid black;
}

HTML:

 <table class="t-table">
<tr style="line-height: 8px">
  <td>A</td>
  <td>B</td>
</tr>
<tr style="line-height: 8px">
  <td>1</td>
  <td>2</td>
</tr>
<tr>
  <td></td>
  <td></td>
</tr>
</table>

或者你可以在这里查看： https ://jsfiddle.net/utrwqfux/

PS 因此，如果我强制在表上设置高度，它将忽略行上的高度。最后一个 tr 没有高度，所以我们的想法是让它自动调整大小以填充空白。

原文由 Andrius 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将 height:8px 设置为第一个和第二个 tr 。并从最后一个 tr 的空单元格中删除中间边框。

 .t-table {
  border: 1px solid black;
  height: 400px;
  border-collapse: collapse;
}
.t-table td {
  border: 1px solid black;
}
.t-table td:empty {
  border-left: 0;
  border-right: 0;
}

 <table class="t-table">
  <tr style="line-height: 8px; height: 8px;">
    <td>A</td>
    <td>B</td>
  </tr>
  <tr style="line-height: 8px; height: 8px;">
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

原文由 Stickers 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我同意 Wart Claes 将 div 显示为表格元素与使用旧式表格布局的观点。但是您遇到的问题是浏览器正在将 tbody 元素添加到您的表中。此元素强制行高。要解决此问题，有两种方法。

1）将tbody设置为显示为块，这将使浏览器忽略其显示属性并完全按照您的意愿进行。

https://jsfiddle.net/benneb10/utrwqfux/1/

 tbody{
  display:block;
}

2）用tbody设置table的table height：

 tbody{
  height:400px;
  overflow:auto;
  overflow-x:hidden;
  border: 1px solid black;
}

但是，这样做不会使您的表格达到您想要的 400px。它会强制 tr 正好是 8px。

https://jsfiddle.net/benneb10/utrwqfux/2/

原文由 Benneb10 发布，翻译遵循 CC BY-SA 3.0 许可协议