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

Question

我需要有一个具有固定高度的行的表,并且该表本身必须具有固定的高度.例如,所有行的高度为8px,表的高度为400px.如果行的总行数少于表的总高度,则表的剩余部分应该像间隙一样.

但是如果我在桌面上设置固定高度,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没有高度,所以我们的想法是重新调整尺寸,自动填充空隙.

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>