防止表格主体超出屏幕的可见高度，然后添加滚动条答案

【问题标题】：Prevent table body from going beyond visible height of screen then add scrollbar防止表格主体超出屏幕的可见高度，然后添加滚动条
【发布时间】：2018-11-14 21:52:08
【问题描述】：

我在页面上有一个表格。有时它会有 10 行，有时它会超过 100 行。如果有足够的行但没有超过，我希望表格一直到屏幕底部。如果有足够的行超出屏幕的高度，我希望它只为 tbody 添加一个滚动条。如有必要，我不想要页面的滚动条只是 tbody 。我还希望标题始终在顶部可见。

这是一个 jsFiddle http://jsfiddle.net/65o2bxfy/ 这主要是我想要的，但我希望它填充到底部并始终让头可见。

我还必须使用 table-layout: fixed 在我的桌子上，以便列宽是正确的大小。

我在其他地方看到过这段代码，但它对我不起作用，因为我事先不知道高度，只是想让它填满屏幕。

table {
  height: 300px;
  display: block;
  overflow-y: scroll;
}

table {
  height: 300px;
  display: block;
  overflow-y: scroll;
}

<div>
<div></div>
<div><table>
<thead>
  <tr>
    <th>COL 1</th>
    <th>COL 2</th>
    <th>COL 3</th>
    <th>COL 4</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>
    <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>
    <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>
    <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>  <tr>
    <td>Text col 1</td>
    <td>Text col 2</td>
    <td>Text col 3</td>
    <td>Text col 4</td>
  </tr>
</tbody>
</table></div>
</div>

谢谢！

【问题讨论】：

喜欢这个jsfiddle.net/65o2bxfy/2 ?
height: 100vh; 或者如果您有边距填充、标题等。height: calc(100vh - 100px);
使用表格无法让头顶保持在顶部。除非使用一些 javascript（有很多可用的插件）。
@MadhawaPriyashantha 这个例子并没有一直到屏幕底部。
@Simsteve7 calc(100vh - 100px) 是我要找的。如果无法使用表格，我现在需要找到一种方法来处理标题。

标签： html css css-tables

【解决方案1】：

使用 CSS 视口单位。 1 vh 表示视口高度的 1/100（宽度与 vw 相同）。 min-height: 100vh 应该可以解决问题。

table {
  min-height: 100vh;
  display: block;
  overflow-y: scroll;
}

浏览器支持也很好https://caniuse.com/#feat=viewport-units

但是，此解决方案仅在您的页面上没有其他元素并且您很高兴它处于 100% 高度时才有效。您可以使用calc() 来抵消与其他元素高度的差异，但是您依赖于这些元素具有固定的高度。

如果您能够向我提供更多关于您希望表格在页面上的位置的背景信息，我可能会为您提供更好的帮助。

要保持表格标题的粘性，请将th 单元格设置为sticky。

thead th { 
  position: sticky; 
  top: 0; 
}

浏览器支持较少，但对于生产来说已经足够了。

https://caniuse.com/#search=sticky

【讨论】：