防止 table 主体超出屏幕的可见高度然后添加滚动条

Question

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

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

我还必须使用 table-layout: fixed 在我的 table 上，以便列宽大小合适。

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

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>

谢谢！

Answer 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() 来抵消与其他元素高度的差异，但是您依赖于这些元素具有固定的高度。

如果您能够向我提供更多有关您希望 table 位于页面上的位置的上下文，我可能会更好地帮助您。

为了让 table 的 header 保持粘性，将 th 单元格设置为 sticky。

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

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

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

防止 table 主体超出屏幕的可见高度然后添加滚动条

Prevent table body from going beyond visible height of screen then add scrollbar

html

css

css-tables