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

我需要一张桌子，它有固定高度的行，而桌子本身必须是固定高度的。 例如，所有行的高度为8px，而表的高度为400px。若表中的行数少于表的总高度，那个么表的其余部分应该像一个间隙

但若我在表格上设置了固定的高度，css会自动重新调整行高度

我需要一张这样的桌子：

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

我试过这个：

CSS:

HTML:

A.
B
1.
2.

或者您可以在此处查看：

p.S.所以，如果我在桌子上强制设置高度，它将忽略行上的高度。最后一个tr没有高度，所以它的想法是自动重新调整尺寸以填补空白

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

---

基本上，我是通过用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>

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

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

实例：

---

这里唯一的问题是，

td

比8px高，因为它们的内容比8px大。8px是实际高度吗？

我同意显示div上的Wart Claes作为表格元素，而不是使用老式的表格布局。但是您遇到的问题是浏览器正在向表中添加一个tbody元素。此元素强制调整行高度。要解决这个问题，有两种方法

1） 将tbody设置为“显示为块”，这将使浏览器忽略其显示特性，并完全按照您的需要执行操作

2） 使用tbody设置桌子的桌子高度：

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

然而，这样做并不能使您的表达到您想要的400px。它将强制tr精确到8px

---

您可以将

高度：8px

设置为第一个和第二个

tr

。并从最后一个

tr

中的空单元格中删除中间边框

.t-table{
边框：1px纯黑；
高度：400px；
边界塌陷：塌陷；
}
.t-table td{
边框：1px纯黑；
}
.t台td：空{
左边框：0；
右边界：0；
}

A.
B
1.
2.

这是通过保持垂直线将桌子延伸到一定高度的正确解决方案

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;
}

---

活生生的例子：

我尝试了一百万种方法，但在我尝试显示：块技巧之前，我无法让浏览器达到我指定的高度。这对我很管用。非常感谢你！

tbody{
  display:block;
}

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

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;
}