html - CSS - tr 上的固定高度和 table 上的固定高度？

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/

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

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>