CSS-如何在表格(tr)和表格(table)上设置固定高度？

Question

我需要一个表格，其中行的高度固定，该表格本身必须是固定高度的。例如，所有行的高度都为8px，表格的高度为400px。如果行数少于表格的总高度，则剩余部分应该像一个空白处。

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

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

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

I tried this:

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/

附注：如果我强制设定表格高度，它将忽略行高。最后一个 tr 没有设置高度，所以想法是让它自动调整大小来填补空白间隙。

- Andrius

Answer 1

我同意Wart Claes的看法，使用div作为表格元素而不是老式的表格布局。但你遇到的问题是浏览器在你的表格中添加了tbody元素。这个元素会强制行高度。要解决这个问题有两种方法。

1）将tbody设置为块级元素，这将使浏览器忽略其显示属性并按照您的要求执行。

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

tbody{
  display:block;
}

2）使用tbody设置表格的高度：

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

然而，这样做并不能使您的表格达到您想要的400px宽度。但是它会强制tr的宽度保持在8px。

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

- Benneb10

---

我尝试了无数种方法，但直到我尝试了display: block技巧，浏览器才采用了我指定的高度。这对我很有效。非常感谢！ - shao.lo

Answer 2

你可以将第一个和第二个 tr 的高度设置为 height:8px。并从最后一个 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

Answer 3

基本上，我是通过在CSS中创建表格而不是在HTML中创建表格来实现的。这样可以获得更多的控制。 HTML：

<div class="table">
    <div class="tr">
        <div class="td">A</div>
        <div class="td">B</div>
    </div>
    <div class="tr">
        <div class="td">1</div>
        <div class="td">2</div>
    </div>
</div>

CSS：

.table {
    background: rebeccapurple;
    display: table;
    height: 400px;
    table-layout: fixed;
    width: 400px;
}

.td {
    background: hotpink;
    display: table-cell;
    height: 8px;
    width: 200px;
}

实时示例：http://codepen.io/WartClaes/pen/mVxdQg?editors=1100

唯一的问题是，由于内容比8px大，所以的高度将会大于8px。8px是实际高度吗？

- Wart Claes

Answer 4

这是保持垂直线的情况下将表格扩展到特定高度的正确解决方案。

CSS

table {
  border: 1px solid black;
  min-height: 400px; /* table height here */
  border-collapse: collapse;
}
td {
  border: 1px solid black;
}
tr {
    height: max-content;
}
tr:last-child {
    height: auto;
}

实时示例：https://jsfiddle.net/sandy912/20z45kaj/3/

- Sandy

Answer 5

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

https://jsfiddle.net/pf8g49h2/

- Head In Cloud