Javascript 具有固定标题且主体上无滚动的引导表

我试图以一种定制的方式创建一个表组件，我可以使表固定，并且可以在没有主体滚动的情况下滚动

问题是，我不知道如何为div.content-table设置一个高度，它保持表的高度，以便始终保持相同的高度大小，但不大于屏幕大小，因此我无法添加px或其他固定大小

我不知道为什么“固定职位”不适用于：|

尝试添加

,

&

更新

$document.readyfunction{ $'example'。数据表； } .标题{ 对齐项目：居中； 背景：橙色无重复滚动0； 显示器：flex； 柔性流动：柱状nowrap； 边缘底部：20px； 填充：20px； 位置：固定； 宽度：100%； } .内容{ 填充顶部：140px； } 我们有一个方向！

这是一个文本

表格标题 表格标题 表格标题 表格标题 表格标题 表格标题 1. 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 2. 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 3. 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 4. 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 5. 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 6. 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 7. 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 8. 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 9 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 10 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 11 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 12 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 13 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 14 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 15 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 16 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 17 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 18 表单元格 表单元格 表单元格 表单元格 表单元格 表单元格 1.不大于屏幕大小 你可以用大众，vh来做这个

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

那么你的情况呢

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

2.为什么定位不起作用 如果你使用

thead{
  position:fixed;
}

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

更多信息

---

我使用的是angular，我无法添加jQuery。问题是，我对容器使用了100vh，但我忘了添加标题高度为-的计算。我认为你的建议会起作用：要使你的表头固定，请查看此链接，它将帮助你。这是一个很好的例子，但我发现了一个非常简单的方法，它工作起来很有魅力：table thead tr{display:block；}table th，table td{width:100px；}table tbody{display:block；height:200px；overflow:auto；}很高兴听到这个消息