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

Posted 2023-03-05

【中文标题】CSS - tr上的固定高度和桌子上的固定高度？

【英文标题】：CSS - fixed height on tr and fixed height on table?

【发布时间】：2016-05-01 20:00:54

【问题描述】：

我需要有具有固定高度行的表格，并且该表格本身必须具有固定高度。 例如，所有行的高度为 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 没有高度，所以想法是让它自动调整大小以填补空白。

【参考方案1】：

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

【参考方案2】：

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

这里唯一的问题是td's 将高于 8px，因为它们的内容比那个大。 8px是实际高度吗？

【参考方案3】：

我同意 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;

但是，这样做不会使您的表格达到您想要的 400 像素。它会强制 tr 正好是 8px。

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

【讨论】：

我尝试了一百万种方法，但在尝试 display: block 技巧之前，我永远无法让浏览器达到我指定的高度。这对我有用。非常感谢！

【参考方案4】：

您可以将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>

【参考方案5】：

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

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/