javascript - 具有固定标题且主体上无滚动的 Bootstrap 表

Question

我正在尝试以自定义方式创建表格组件我管理表格 <thead>待修复，<tbody>无需主体滚动即可滚动。

1. 问题是我不知道如何为 div.content-table 设置高度这是为了保持表格始终具有相同的高度尺寸但不大于屏幕尺寸，所以我不能添加 px 或其他类型的固定尺寸。

2. 我不知道为什么位置固定不适用于 <thead> :|

fiddle example:

Answer 1

1。不大于屏幕尺寸

你可以使用 vw,vh 单位。

1vh = 1% * screenHeight
1vw = 1% * screenWidth

所以在你的情况下

max-height = calc(100vh - 200px);
max-width = 100vw;

2。为什么位置固定不起作用

如果你使用

thead{
  position:fixed;
}

thead 将与 tbody 分开工作，我认为 css 在 position:fixed 元素上单独计算。

更多信息 table header fixed example