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

时间：2018-11-12 16:14:21

标签： html css css-tables

我在页面上有一张桌子。有时它将有10行，而有时它将超过100行。如果有足够的行但不超过该行，我希望该表一直到屏幕底部。如果有足够多的行超出屏幕的高度，我希望它为躯干添加滚动条。我不需要页面的滚动条，如果需要的话。我还希望thead在顶部始终可见。

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

我还必须使用表格布局：固定在我的表格上，以便列宽为正确的大小。

在其他地方，我也看到了这段代码，但是它对我不起作用，因为我不知道预先的高度，只是我希望它填满屏幕。

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>

谢谢！

1 个答案:

答案 0 :(得分：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

相关问题
最新问题