关键词：
【中文标题】Flexbox 类型的固定表头，表格标记的可滚动内容【英文标题】：Flexbox type fixed header, scrollable content for table markup 【发布时间】：2018-05-25 23:31:32 【问题描述】：我正在使用一个使用传统表标记的数据表，但我想要的是我的表从页面中的某个位置开始，我希望我的表头固定在它开始的位置，并且表体应该滚动剩余页面高度 我在这里展示一个小例子https://codepen.io/avreddy/pen/eyYBdB?editors=1100
.datatable
width: 50%;
border-collapse: collapse;
td
text-align: center;
border: 1px solid;
padding:5px;
<body>
<div class="somecontent">
<h4>Some Content</h4><h4>Some Content</h4><h4>Some Content</h4>
</div>
<table class="datatable">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>我知道我们可以从 flex-box 响应式表格中获取它，但我的限制是我必须使用传统的表格标记，所以如果告诉我除了 flex-box 响应式表格还有其他方法吗 谢谢
【问题讨论】：
***.com/questions/4709390/… jsfiddle.net/andrewwhitaker/fj8wM 【参考方案1】：可滚动表格 + 固定标题技巧不能用于自动列宽。这是因为它们更改了 tbody 元素的显示属性，从而创建了一个具有不同列宽的新（匿名）表。
我能想到的最佳解决方案是创建表格的副本（以便两者具有相同的内容，因此具有相同的列宽）并独立操作它们。
在下面的示例中，我使用 jQuery 创建表的副本并使用visibility: collapse 来隐藏表头和表体：
$(function()
$("#button-1").one("click", function()
$(".datatable").clone().insertAfter(".datatable");
$(".datatable").eq(0).addClass("tablehead");
$(".datatable").eq(1).addClass("tablebody");
);
);/* full height */
html height: 100%;
body height: 100%; margin: 0; padding: 0; font: medium monospace;
/* make last item scrollable and occupy available height */
#wrapper height: 100%; display: flex; flex-direction: column; overflow-y: hidden;
#wrapper > :last-child display: block; flex: 1; overflow-y: auto;
/* make thead and tbody collapse when JavaScript adds the classes */
.datatable.tablehead tbody visibility: collapse;
.datatable.tablebody thead visibility: collapse;
/* beautify */
.datatable border-collapse: collapse;
.datatable th border: 1px solid; background-color: #CCC;
.datatable td border: 1px solid; padding: 5px; <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--
Notes:
1) Using a wrapper div instead of body because third party scripts
often append elements to body element breaking our flex model
2) Width of second column is determined by thead > 1st row > 2nd column
while width of third column is determined by tbody > 1st row > 3rd column
3) If JavaScript fails the result is still usable
-->
<div id="wrapper">
<div>
<h4>Some Content</h4>
<h4>Some Content</h4>
<p><button type="button" id="button-1">Convert to fixed header</button></p>
</div>
<table class="datatable">
<thead>
<tr>
<th>col 1</th>
<th>col 2 (wide header)</th>
<th>col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3 (wide content)</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>请注意，visibility: collapse 并非在所有浏览器中都正确实现。另一种解决方案是将两个表包装在 div 中：标题表的固定高度 div，正文表的可滚动 div。但是你需要设置标题的高度。
【讨论】：
您不能使用弹性显示来显示数据表，因为它会干扰表格布局您可以看到表格的子项未根据表格标题对齐，因为仅弹性显示 @AravindReddy 是的，这是一个已知问题。解决方法是在每列上指定一个固定的 % 或 px 宽度。 @AravindReddy 查看修改后的答案。【参考方案2】：.datatable
width: 50%;
border-collapse: collapse;
/*this code is added to fix header at the top of the screen*/
thead th
position: sticky; /*stick the element*/
top: 0px;
background: grey;
td
text-align: center;
border: 1px solid;
padding:5px;
<body>
<div class="somecontent">
<h4>Some Content</h4><h4>Some Content</h4><h4>Some Content</h4>
</div>
<table class="datatable">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>你想要这样的标题将被粘在页面顶部。
【讨论】：
【参考方案3】：尝试将position: sticky 替换为您的thead。
您需要将其应用到th 才能在所有浏览器中工作。
thead th
position: sticky; // Sticky makes it, well, sticky
top: 0px; // At which offset it should become sticky
background-color: #fff; // Otherwise the th is transparent
Codepen
要使其从当前位置保持粘性，您可以使用一些 javascript：
let topOffset = document.getElementById("datatable").offsetTop;
let elementList = document.querySelectorAll('.datatable thead th');
for (i = 0; i < elementList.length; i++)
elementList[i].style.top = topOffset + 'px';
现在在笔中可能看起来有点奇怪（重叠/透明度），但是当您说 thead 上方有内容（标题、警报框......）时，只需应用 zIndex 更高比桌子，它应该看起来不错。
我目前在一个网站上工作，它有一个全屏表格、一个粘性标题和一个可变高度的内容块，这就是我使用的（尽管偏移量的计算与 AngularJS 略有不同）。
Codepen
【讨论】：
我知道如果您知道顶部偏移量，这可能会起作用，但我的问题是我不知道顶部内容将使用多少空间我希望将头贴在它开始的位置 是的，兄弟我也知道，我也尝试过，但问题是先加载表格，然后加载顶部内容，因为我对两者都使用不同的控制器，所以如果我使用你提到的 java 代码它会在标题顶部内容加载之前采用顶部偏移量，因此它是无用的 然后将其包装在一个功能块中，并使用 onload:<div class='header' onload='calculateTableOffset()'></div> 调用它，或者在加载后在您的控制器中调用它。
好的，我会尝试，但看看其他答案，我认为有人在没有 javascript 的情况下回答了我的问题滚动表格固定表头和左边栏
...， 在该标签内再复制两个绝对定位的表格，一个作为固定头部，一个作为固定左边栏， 再在该标签内添加一个放在左上角的标签，宽高与第一个td相同 当表格滚动的时候固定头部和左边栏的表格也跟着同步滚动（通... 查看详情
纯css控制－表格表头固定,内容多时滚动内容
<html><head><styletype="text/css">*{margin:0;padding:0;}/*所有内容都在这个DIV内*/.all{width:100%;border:1pxsolid#000000;}/*表头在这个DIV内*/.title{width:500px;/*这个宽度需要与下面的内容的DIV相等*/}/*表格样式*/table{w 查看详情
javascript：固定table的表头
...对表头进行特殊的样式设置。下面的jsp代码可以实现表头固定，经过测试可以直接使用。在IE浏览器下，拉动滚动条时表头会抖动，在谷歌下确实很流程，估计是浏览器的兼容性问题。<!doctypehtmlpublic"-//w3c//dtdhtml4.0trans 查看详情
怎么实现html表头固定，表格内的信息向上滚动
参考技术A<style>* margin:0; padding:0; list-style:none;.table, .table td border:1px solid #999;border-collapse:collapse; margin:0 auto;.table td font-size:14px; text-align:center; line-height:25px;.tableTitle positi... 查看详情
如何使用角度和离子制作带有固定标题的可滚动表格
】如何使用角度和离子制作带有固定标题的可滚动表格【英文标题】：Howtomakeascrollabletablewithfixedheaderusingangularandionic【发布时间】：2020-03-1319:47:22【问题描述】：我正在尝试使用离子网格创建一个带有固定标题的可滚动表格水平... 查看详情
自定义表格固定表头，随着表格内容增加出现滚动条
1、首先要固定表头就必须是两个表格组合在一起2、用一个div把两个表格包在一起，并且设置宽度，在让它可以横向滚动，overflow-x:auto3、在设置里面两个table的宽度为一样，在设置内容表格overflow-x:hidden;overflow-y:auto<!--表格表头... 查看详情
滚动期间表头需要保持固定[重复]
】滚动期间表头需要保持固定[重复]【英文标题】：Tableheaderneedstoremainfixedduringscrolling[duplicate]【发布时间】：2013-09-0917:48:35【问题描述】：我有一个带有标题和正文的表格，我希望表格标题在正文上发生滚动时保持固定。表格是... 查看详情
table固定表头固定列实现横向纵向滚动
...只有tbody，分别把两个table用div包裹起来，设置有tbody的div固定高度，超出overflow:scroll；至于横向滚动的问题，可以设置position:sticky，然后根据左右浮动的个数及对应列所在的index，计算left或者right的长度。因为table里thead和tbody本... 查看详情
具有固定列和标题的可滚动表格，带有现代 CSS
】具有固定列和标题的可滚动表格，带有现代CSS【英文标题】：Scrollabletablewithfixedcolumnsandheader,withmodernCSS【发布时间】：2018-02-2618:28:58【问题描述】：如何使用现代CSS制作尽可能少的JavaScript表格？我想要的功能是：固定列（定... 查看详情
具有固定页眉和页脚以及没有固定宽度的可滚动正文的 HTML 表格
】具有固定页眉和页脚以及没有固定宽度的可滚动正文的HTML表格【英文标题】：HTMLtablewithfixedheaderandfooterandscrollablebodywithoutfixedwidths【发布时间】：2016-09-1307:54:56【问题描述】：我想创建一个带有固定thead和tfoot以及可滚动tbody的... 查看详情
bootstraptable实现固定悬浮table表头并可以水平滚动
在开发项目中，需要将表格头部固定，而且表格大多数情况下是会水平滚动的。项目的css框架是bootstrap3，故也可以叫做bootstraptable。需要实现的是：表格头部固定，并且支持水平滚动htmlcode(sourcetable):<tableid="top_fix_table"border="0"c... 查看详情
elementui组件表格高度以及表头固定表身滚动方法
1.表格高度：在el-table标签里增加一个类名classA,然后写css样式：.classAth,.classAtdpadding:0!important;height:20px;//需要的高度line-height:20px;2.表头固定，表身超过高度自动滚动直接在el-table标签里增加height:100%就可以了。 查看详情
具有固定位置和可滚动表数据元素的 HTML 表头
】具有固定位置和可滚动表数据元素的HTML表头【英文标题】：HTMLTableHeaderwithFixedPositionandscrollabletabledataelements【发布时间】：2017-03-2617:57:13【问题描述】：这个问题的主要目的是固定表格标题，当我们垂直滚动时，只有元素应该... 查看详情
如何在相对布局中添加固定标题和滚动视图表行？
】如何在相对布局中添加固定标题和滚动视图表行？【英文标题】：Howtoaddfixedheaderandscrollviewtablerowsinrelativelayout?【发布时间】：2021-12-2902:13:54【问题描述】：我的目的是用可滚动的行固定表头，以便用户在表内添加值时表头可... 查看详情
Flutter：固定高度容器内的可滚动列子项
】Flutter：固定高度容器内的可滚动列子项【英文标题】：Flutter:ScrollableColumnchildinsideafixedheightContainer【发布时间】：2021-08-2022:44:07【问题描述】：我在一个ListView中有几个containiers，这将在页面内产生一个可滚动内容。每个容器... 查看详情
带有滚动正文的引导固定表头
】带有滚动正文的引导固定表头【英文标题】：bootstrapfixedtableheaderswithscrollingbody【发布时间】：2015-11-3006:16:19【问题描述】：编程新手，也是第一次在这里发帖。我在面板中的引导表有点问题。我有一个下拉菜单，用户可以在... 查看详情
实现固定表头和表列的table组件
...比较多时，为了查看方便，希望能在纵向滚动时固定表头，在横向滚动时在左边或右边固定特定表列，这是原生不支持的。目录实际效果设计思路普通表格固定表头固定表列同时固定表头和表列实际效果table同时... 查看详情
css手写一个表头固定(代码片段)
Bootstrap,layui等前端框架里面都对表头固定，表格滚动有实现，偏偏刚入职的公司选择了手动渲染表格，后期又觉得表格数据拉太长想要做表头固定。为了避免对代码改动太大，所以决定手写表头固定主要遇到的个问题就是固定以... 查看详情