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/

P.S。因此，如果我在桌子上强制高度，它将忽略行上的高度。最后的tr没有高度，所以我们的想法是重新调整尺寸，自动填充空隙。

Answer 1

基本上我是通过在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＆＃39}将高于8px，因为它们的内容大于此值。 8px是实际高度吗？

Answer 2

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

Answer 3

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

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/

Answer 4

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

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/

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

5 个答案: