CSS-tr上的固定高度和桌子上的固定高度? [英] CSS - fixed height on tr and fixed height on table?

问题描述

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

I need to have table that has rows with fixed height and that table itself must be of fixed height. For example all rows would be of 8px height and table would be of height 400px. If there would be less rows than total height of table, then remaining part of the table should be like a gap.

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

But css automatically readjusts row height if I set fixed height on table.

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

I need table to look like this:

|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/

Or you can check it here: https://jsfiddle.net/utrwqfux/

PS .因此，如果我在表格上强行设置高度，它将忽略行上的高度.最后一个tr没有高度，所以这个想法是为了自动调整大小以填补空白.

P.S. So if I force height on table it will ignore height on rows. Last tr was without height, so the idea was for it to re-size automatically filling empty gap.

推荐答案

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

You can set height:8px to the first and second tr. And remove the middle border from the empty cells in the last 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>

这篇关于CSS-tr上的固定高度和桌子上的固定高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！