表格固定标题和可滚动正文
Posted
技术标签:
【中文标题】表格固定标题和可滚动正文【英文标题】：Table fixed header and scrollable body 【发布时间】：2021-12-25 07:09:36 【问题描述】：我正在尝试使用 bootstrap 3 表制作具有固定标题和可滚动内容的表。 不幸的是，我找到的解决方案不适用于 bootstrap 或破坏样式。
这里有一个简单的引导表，但由于某种原因，我不知道 tbody 的高度不是 10px。
height: 10px !important; overflow: scroll;
例子：
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody style="height: 10px !important; overflow: scroll; ">
<tr>
<td class="filterable-cell">111 Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
</table>【问题讨论】：
这有帮助吗？ ***.com/a/17380697/1725764 这绝对帮助了我。这里的解决方案jsfiddle.net/T9Bhm/7谢谢 当 td 高度不匹配时，无法正确处理 table-striped 属性。 jsfiddle.net/T9Bhm/4755 见添加的 td overflow-wrap: break-word;我添加的 我认为更好和更旧的 SO 线程被标记为重复：p ***.com/questions/17067294/… 这能回答你的问题吗？ How do I create an html table with a fixed/frozen left column and a scrollable body? 【参考方案1】：您应该尝试使用“display:block;”到 tbody，因为现在它是 inline-block 并且为了设置高度，元素应该是“块”
【讨论】：
display:block 是必要的，但我还必须为所有单元格放置 float:left 和适当的宽度。我发布的解决方案现在正在运行。 我确实 display:block 在 tbody 和 thead 上，它们完美对齐。块是滚动和高度工作的关键。谢谢。【参考方案2】：这是可行的解决方案：
table
width: 100%;
thead, tbody, tr, td, th display: block;
tr:after
content: ' ';
display: block;
visibility: hidden;
clear: both;
thead th
height: 30px;
/*text-align: left;*/
tbody
height: 120px;
overflow-y: auto;
thead
/* fallback */
tbody td, thead th
width: 19.2%;
float: left;
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Color</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
<tr>
<td class="filterable-cell">Ford</td>
<td class="filterable-cell">Escort</td>
<td class="filterable-cell">Blue</td>
<td class="filterable-cell">2000</td>
</tr>
</tbody>
</table>链接到jsfiddle
【讨论】：
不适用于 IE9（可能还有其他）；需要固定宽度的列（如果要使用固定宽度的列，还有更简单、更跨浏览器的解决方案）；如果内容超出固定宽度，则严重中断；实际上并没有排列标题和列（您可以在the fiddle linked above 中看到它；在this version 中更清晰，这给了它们一个简单的边框）尽管这可能是固定的；滚动条与表格的主体没有完全对齐... 给td和th加一个可见边框，你会看到td的宽度和th的宽度不匹配 这个解决方案的问题是它需要一个固定的高度。这在响应式设计中不起作用。我一直在研究使用 position: fixed 的解决方案，它解决了滚动问题，但会弄乱行宽。 您可以手动修复与 th 宽度不匹配的 td 宽度，方法是将 td 和 th 的宽度 % 声明分开，并将 th 设置为稍微窄一些。您每次都需要自定义，但这不是应该经常使用的东西。 在标题行上这个解决方案有问题：标题角色只能有不超过 4 列，如果你有超过 4 列，则会调用新行。*需要调整对应行号的宽度 %*【参考方案3】：您可能会在一页上获得多个表格，因此您需要 CSS 类。请为此找到修改后的@giulio 解决方案。
只需在表中声明即可：
<table class="table table-striped header-fixed"></table>
CSS
.header-fixed
width: 100%
.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td
display: block;
.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after
content: ' ';
display: block;
visibility: hidden;
clear: both;
.header-fixed > tbody
overflow-y: auto;
height: 150px;
.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th
width: 20%;
float: left;
请注意，当前的实现仅适用于五列。如果您需要不同的数字，请将 width 参数从 20% 更改为 *100% / number_of_columns*。
【讨论】：
在遵循了所有不同的复杂解决方案之后，我发现这是最好的解决方案。然而，垂直滚动条有一些宽度（这很明显），但由于它，标题和行之间的对齐方式略有不匹配。我有 7 列，所以我在使用提及公式计算后将宽度设置为 14.28% 如何为每列分配一定的宽度？ @user1807271 您可以通过 JS 分配每一列的宽度，或者创建一个具有您需要的宽度的每列类（例如“col1”、“col2”等）并分配类“col1”到第一列的所有单元格，“col2”和第二列，等等。 我建议你也添加.header-fixed > thead > tr > thwhite-space: nowrap;。如果标题开始包装它会搞砸【参考方案4】：
不需要将其包装在 div 中...
CSS：
tr
width: 100%;
display: inline-table;
table-layout: fixed;
table
height:300px; // <-- Select the height of the table
display: block;
tbody
overflow-y: scroll;
height: 200px; // <-- Select the height of the body
width: 100%;
position: absolute;
引导层：https://www.codeply.com/p/nkaQFc713a
【讨论】：
这看起来很棒，直到您意识到列数据必须具有相同的宽度。如果不是，则数据不适合标题。 单个单元格溢出时此解决方案不起作用。 不想卷轴怎么办？ 这在 chrome 中不起作用，无论是 bootply 还是解决方案。 仅供评论，它在 Chrome 中适用于我，表格位于页面内容的中间顶部...。您能提供更多信息吗？ （我在linux上）【参考方案5】：使用这个链接，***.com/a/17380697/1725764，由 Hashem Qolami 在原始帖子的 cmets 中使用，并使用 display:inline-blocks 代替浮动。 如果表格也有“table-bordered”类，则修复边框。
table.scroll
width: 100%;
&.table-bordered
td, th
border-top: 0;
border-right: 0;
th
border-bottom-width: 1px;
td:first-child,
th:first-child
border-right: 0;
border-left: 0;
tbody
height: 200px;
overflow-y: auto;
overflow-x: hidden;
tbody, thead
display: block;
tr
width: 100%;
display: block;
th, td
display: inline-block;
td
height: 46px; //depends on your site
然后只需添加 td 和 th 的宽度
table.table-prep
tr > td.type,
tr > th.type
width: 10%;
tr > td.name,
tr > th.name,
tr > td.notes,
tr > th.notes,
tr > td.quantity,
tr > th.quantity
width: 30%;
【讨论】：
【参考方案6】：更新
对于更新且仍在维护的库，请尝试 jquery.floatThead（正如 Bob Jordan 在评论中提到的）。
旧答案
这是一个很老的答案，下面提到的库不再维护。
我在 GitHub 上使用 StickyTableHeaders，它的作用就像魅力一样！
我不得不添加这个 css 以使标题不透明。
table#stickyHeader thead
border-top: none;
border-bottom: none;
background-color: #FFF;
【讨论】：
请注意，stickyTableHeaders 插件只会在浏览器最初加载它时找到页面中的 html，它不会获取动态生成的内容 @RobSedgwick，我没有这个，但它应该仍然有效。只要您初始化stickyTableHeadres AFTER，表格就会生成。这意味着您不能在头部初始化它，而是在动态生成的表完成后立即初始化它。 很棒的解决方案。非常感激。如果有人在使背景不透明时遇到问题，我必须使用.tableFloatingHeaderOriginal //css 。
这个插件对我不起作用，因为偶尔头部会从桌子上飘出来然后又飘回来，这看起来像是 st 坏了。
如何调整垂直滚动条的空间。我们可以通过使用 css 来实现吗？【参考方案7】：
在我看来，jQuery 最好的插件之一是DataTables。
它还有一个fixed header的扩展，而且很容易实现。
取自他们的网站：
HTML：
<table id="example" class="display" cellspacing="0" >
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tbody>
</table>
$(document).ready(function()
var table = $('#example').DataTable();
new $.fn.dataTable.FixedHeader( table );
);
但是，您可以只制作一个可滚动的<tbody> 最简单的方法是：
//configure table with fixed header and scrolling rows
$('#example').DataTable(
scrollY: 400,
scrollCollapse: true,
paging: false,
searching: false,
ordering: false,
info: false
);
【讨论】：
我希望第一列和标题都被修复，根据数据表兼容性图表这是不可能的【参考方案8】：您可以放置两个 div，其中第一个 div（标题）将具有透明滚动条，第二个 div 将具有可见/自动滚动条的数据。示例具有用于循环数据的角码 sn-p。
以下代码对我有用 -
<div id="transparentScrollbarDiv" class="container-fluid" style="overflow-y: scroll;">
<div class="row">
<div class="col-lg-3 col-xs-3"><strong>col1</strong></div>
<div class="col-lg-6 col-xs-6"><strong>col2</strong></div>
<div class="col-lg-3 col-xs-3"><strong>col3</strong></div>
</div>
</div>
<div class="container-fluid" style="height: 150px; overflow-y: auto">
<div>
<div class="row" ng-repeat="row in rows">
<div class="col-lg-3 col-xs-3">row.col1</div>
<div class="col-lg-6 col-xs-6">row.col2</div>
<div class="col-lg-3 col-xs-3">row.col3</div>
</div>
</div>
</div>
隐藏标题滚动条的附加样式-
<style>
#transparentScrollbarDiv::-webkit-scrollbar
width: inherit;
/* this targets the default scrollbar (compulsory) */
#transparentScrollbarDiv::-webkit-scrollbar-track
background-color: transparent;
/* the new scrollbar will have a flat appearance with the set background color */
#transparentScrollbarDiv::-webkit-scrollbar-thumb
background-color: transparent;
/* this will style the thumb, ignoring the track */
#transparentScrollbarDiv::-webkit-scrollbar-button
background-color: transparent;
/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
#transparentScrollbarDiv::-webkit-scrollbar-corner
background-color: transparent;
/* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
</style>
【讨论】：
【参考方案9】：晚会（我的生活故事），但由于这是谷歌上的第一个结果，以上都没有让我工作，这是我的代码
/*Set a min width where your table start to look like crap*/
table min-width: 600px;
/*The next 3 sections make the magic happen*/
thead, tbody tr
display: table;
width: 100%;
table-layout: fixed;
tbody
display: block;
max-height: 200px;
overflow-x: hidden;
overflow-y: scroll;
td
overflow: hidden;
text-overflow: ellipsis;
/*Use the following to make sure cols align correctly*/
table, tr, th, td
border: 1px solid black;
border-collapse: collapse;
/*Set your columns to where you want them to be, skip the one that you can have resize to any width*/
th:nth-child(1), td:nth-child(1)
width: 85px;
th:nth-child(2), td:nth-child(2)
width: 150px;
th:nth-child(4), td:nth-child(4)
width: 125px;
th:nth-child(5)
width: 102px;
td:nth-child(5)
width: 85px;
【讨论】：
它对我有用，但现在所有 td 都具有相同的宽度。我不想要。 简直太棒了。旁注：th:nth-child(2), td:nth-child(2) 等价于tr > :nth-child(2)【参考方案10】：
我在让stickytableheaders 库工作时遇到了很多麻烦。进行更多搜索后，我发现floatThead 是一个积极维护的替代方案，具有最近的更新和更好的文档。
【讨论】：
【参考方案11】：固定表头 - 仅 CSS
只需 position: sticky; top: 0; 你的 th 元素。 （Chrome、FF、Edge）
.tableFixHead overflow: auto; height: 100px;
.tableFixHead thead th position: sticky; top: 0; z-index: 1;
/* Just common table stuff. Really. */
table border-collapse: collapse; width: 100%;
th, td padding: 8px 16px;
th background:#eee; <div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>对于sticky vertical TH and horizontal TH columns (inside TBODY)：
.tableFixHead overflow: auto; height: 100px; width: 240px;
.tableFixHead thead th position: sticky; top: 0; z-index: 1;
.tableFixHead tbody th position: sticky; left: 0;
.tableFixHead overflow: auto; height: 100px; width: 240px;
.tableFixHead thead th position: sticky; top: 0; z-index: 1;
.tableFixHead tbody th position: sticky; left: 0;
/* Just common table stuff. Really. */
table border-collapse: collapse; width: 100%;
th, td padding: 8px 16px; white-space: nowrap;
th background:#eee; <div class="tableFixHead">
<table>
<thead>
<tr><th></th><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><th>Foo</th><td>Some long text lorem ipsum</td><td>Dolor sit amet</td></tr>
<tr><th>Bar</th><td>B1</td><td>B2</td></tr>
<tr><th>Baz</th><td>C1</td><td>C2</td></tr>
<tr><th>Fuz</th><td>D1</td><td>D2</td></tr>
<tr><th>Zup</th><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>TH 边框问题修复
由于border 无法正确绘制在已翻译的TH 元素上，
重新创建和渲染 "borders" 使用 box-shadow 属性：
/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td
box-shadow: inset 1px -1px #000;
.tableFixHead th
box-shadow: inset 1px 1px #000, 0 1px #000;
.tableFixHead overflow: auto; height: 100px;
.tableFixHead thead th position: sticky; top: 0; z-index: 1;
/* Just common table stuff. Really. */
table border-collapse: collapse; width: 100%;
th, td padding: 8px 16px;
th background:#eee;
/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td
box-shadow: inset 1px -1px #000;
.tableFixHead th
box-shadow: inset 1px 1px #000, 0 1px #000;
<div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>固定表头 - 使用 JS。 (IE)
您可以使用一点 JS 和 translateY th 元素
jQuery 示例
var $th = $('.tableFixHead').find('thead th')
$('.tableFixHead').on('scroll', function()
$th.css('transform', 'translateY('+ this.scrollTop +'px)');
);.tableFixHead overflow-y: auto; height: 100px;
/* Just common table stuff. */
table border-collapse: collapse; width: 100%;
th, td padding: 8px 16px;
th background:#eee; <div class="tableFixHead">
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>如果您愿意，也可以使用纯 ES6（不需要 jQuery）：
// Fix table head
function tableFixHead (e)
const el = e.target,
sT = el.scrollTop;
el.querySelectorAll("thead th").forEach(th =>
th.style.transform = `translateY($sTpx)`
);
document.querySelectorAll(".tableFixHead").forEach(el =>
el.addEventListener("scroll", tableFixHead)
);
【讨论】：
@Roko 非常感谢您提供如此干净的解决方案，它就像 chrome 中的魅力一样。不幸的是，这在 IE11 中不起作用。是否有任何调整使其在 IE11 中工作。 @AP for IE11（因为它不理解 sticky）您可以使用第二个使用translateY 的示例（以及 jQuery 代码 - 如果您不编译你的 ES6 js 代码）。 它会工作，但看起来有点“跳跃”。但这没关系。如果一个人想使用过时的浏览器，那么这样的人/公司将永远不会抱怨不稳定的事情 - 只要他能够看到内容并与您的网站进行良好的互动。有趣的阅读：nealbuerger.com/2018/01/the-end-of-life-of-internet-explorer-11
表头多于一行时不起作用。滚动时，第二个标题行会向上跳并覆盖第一个标题行，因为它们都有“top:0”。修补了整个 的粘性，但无法使其工作。对多行标题有什么想法（使用 colspans 引导）？
如果 position: sticky; top: 0; 的***解决方案在您的代码中不起作用 - 检查包含元素的overflow-x 和overflow-y css 属性，尤其是table、thead、@987654349 @。令人惊讶的是，它们都不能设置溢出。您可能需要明确地unset 他们。更多信息 - ***.com/a/54806576/882936
@RokoCBuljan 是的。您的答案中的第一个解决方案在我的代码中不起作用，直到我检查了父表元素上的overflows，如链接评论中所述。希望为未来的读者节省几个小时的探索时间?
【参考方案12】：
使用 css 更容易
table tbody display:block; max-height:450px; overflow-y:scroll;
table thead, table tbody tr display:table; width:100%; table-layout:fixed;
【讨论】：
您可以通过使用 JavaScript 添加 CSS 类来克服table-layout:fixed
th 与 td 不一致【参考方案13】：
不管它现在值多少钱：我确实在姐妹线程Table scroll with HTML and CSS 上发布了一个解决方案，
采用两张表格（一张仅用于标题，一张用于全部 - 由浏览器布局） 布局后，将上部（仅标题）表格调整为下部表格的宽度 隐藏（visibility，而不是 display）下部表格的标题，并使下部表格可在 div 中滚动
该解决方案与所使用的任何样式/框架无关 - 所以也许它在这里也很有用...
详细描述在Table scroll with HTML and CSS/代码也在这支笔中：https://codepen.io/sebredhh/pen/QmJvKy
【讨论】：
【参考方案14】：首先为引导表添加一些标记。在这里，我创建了一个条纹表，还添加了一个自定义表类.table-scroll，它为表添加垂直滚动条，并在向下滚动时使表头固定。
<div class="col-xs-8 col-xs-offset-2 well">
<table class="table table-scroll table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>County</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andrew</td>
<td>Jackson</td>
<td>Washington</td>
</tr>
<tr>
<td>2</td>
<td>Thomas</td>
<td>Marion</td>
<td>Jackson</td>
</tr>
<tr>
<td>3</td>
<td>Benjamin</td>
<td>Warren</td>
<td>Lincoln</td>
</tr>
<tr>
<td>4</td>
<td>Grant</td>
<td>Wayne</td>
<td>Union</td>
</tr>
<tr>
<td>5</td>
<td>John</td>
<td>Adams</td>
<td>Marshall</td>
</tr>
<tr>
<td>6</td>
<td>Morgan</td>
<td>Lee</td>
<td>Lake</td>
</tr>
<tr>
<td>7</td>
<td>John</td>
<td>Henry</td>
<td>Brown</td>
</tr>
<tr>
<td>8</td>
<td>William</td>
<td>Jacob</td>
<td>Orange</td>
</tr>
<tr>
<td>9</td>
<td>Kelly</td>
<td>Davidson</td>
<td>Taylor</td>
</tr>
<tr>
<td>10</td>
<td>Colleen</td>
<td>Hurst</td>
<td>Randolph</td>
</tr>
<tr>
<td>11</td>
<td>Rhona</td>
<td>Herrod</td>
<td>Cumberland</td>
</tr>
<tr>
<td>12</td>
<td>Jane</td>
<td>Paul</td>
<td>Marshall</td>
</tr>
<tr>
<td>13</td>
<td>Ashton</td>
<td>Fox</td>
<td>Calhoun</td>
</tr>
<tr>
<td>14</td>
<td>Garrett</td>
<td>John</td>
<td>Madison</td>
</tr>
<tr>
<td>15</td>
<td>Fredie</td>
<td>Winters</td>
<td>Washington</td>
</tr>
</tbody>
</table>
</div>
css
.table-scroll tbody
position: absolute;
overflow-y: scroll;
height: 250px;
.table-scroll tr
width: 100%;
table-layout: fixed;
display: inline-table;
.table-scroll thead > tr > th
border: none;
【讨论】：
【参考方案15】：像这样将表格放在 div 中，以使表格垂直滚动。将 overflow-y 更改为 overflow-x 以使表格可水平滚动。只需overflow 即可使表格水平和垂直滚动。
<div style="overflow-y: scroll;">
<table>
...
</table>
</div>
【讨论】：
【参考方案16】：更清洁的解决方案（仅限 CSS）
.table-fixed tbody
display:block;
height:85vh;
overflow:auto;
.table-fixed thead, .table-fixed tbody tr
display:table;
width:100%;
<table class="table table-striped table-fixed">
<thead>
<tr align="center">
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 1</td>
<td>Content 1</td>
<td>Content 1</td>
</tr>
<tr>
<td>Longer Content 1</td>
<td>Longer Content 1</td>
<td>Longer Content 1</td>
<td>Longer Content 1</td>
</tr>
</tbody
</table
【讨论】：
【参考方案17】：最新的添加位置：'sticky'将是这里最简单的解决方案
.outer
overflow-y: auto;
height:100px;
.outer table
width: 100%;
table-layout: fixed;
border : 1px solid black;
border-spacing: 1px;
.outer table th
text-align: left;
top:0;
position: sticky;
background-color: white;
<div class = "outer">
<table>
<tr >
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
<tr >
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<tr>
</table>
</div>【讨论】：
赞成并指出不需要外部元素（只需将block 设置为表格显示，匿名表格包装器will be created），不需要固定表格布局和sticky can't be set在当今浏览器中的 thead 和 tr 上（您会将此信息添加到您的答案中以节省其他人实施它的麻烦吗？）【参考方案18】：
我使用了 floatThead jQuery 插件 (https://mkoryak.github.io/floatThead/#intro)
文档说它适用于 Bootstrap 3 表，我可以说它也适用于带有或不带有表响应帮助器的 Bootstrap 4 表。
使用插件就这么简单：
HTML（普通引导表标记）
<div class="table-responsive">
<table id="myTable" class="table table-striped">
<thead>...</thead>
<tbody>...</tbody>
</table>
</div>
插件初始化：
$(document).ready(function()
var tbl=$('#myTable');
tbl.floatThead(
responsiveContainer: function(tbl)
return tbl.closest('.table-responsive');
);
);
完整的免责声明： 我与插件没有任何关联。经过数小时尝试在这里和其他地方发布的许多其他解决方案后，我碰巧找到了它。
【讨论】：
【参考方案19】：对于全高的表格（页面滚动，而不是表格）
注意：我移动了整个 <thead>...</thead>，因为在我的情况下，我有两行（标题和过滤器）
使用 JS (jQuery)
$( function()
let marginTop = 0; // Add margin if the page has a top nav-bar
let $thead = $('.table-fixed-head').find('thead');
let offset = $thead.first().offset().top - marginTop;
let lastPos = 0;
$(window).on('scroll', function ()
if ( window.scrollY > offset )
if ( lastPos === 0 )
// Add a class for styling
$thead.addClass('floating-header');
lastPos = window.scrollY - offset;
$thead.css('transform', 'translateY(' + ( lastPos ) + 'px)');
else if ( lastPos !== 0 )
lastPos = 0;
$thead.removeClass('floating-header');
$thead.css('transform', 'translateY(' + 0 + 'px)');
);
);
CSS（仅用于样式）
thead.floating-header>tr>th
background-color: #efefef;
thead.floating-header>tr:last-child>th
border-bottom: 1px solid #aaa;
【讨论】：
【参考方案20】：table
display: block;
thead, tbody
display: block;
tbody
position: absolute;
height: 150px;
overflow-y: scroll;
td, th
min-width: 100px !important;
height: 25px !important;
overflow:hidden !important;
text-overflow: ellipsis !important;
max-width: 100px !important;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container" style="position:fixed;height:180px;overflow-x:scroll;overflow-y:hidden">
<table>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Username</th>
<th>Password</th>
<th>First Name</th>
<th>Last Name</th>
<th>Col16</th>
<th>Col7</th>
<th>Col8</th>
<th>Col9</th>
<th>Col10</th>
<th>Col11</th>
<th>Col12</th>
<th>Col13</th>
<th>Col14</th>
<th>Col15</th>
<th>Col16</th>
<th>Col17</th>
<th>Col18</th>
</tr>
</thead>
<tbody>
</tbody>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
<tr>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
<td>Long Value</td>
<td>Title</td>
</tr>
</table>
</div>`enter code here`【讨论】：
【参考方案21】：单个窗口中支持多个可滚动表格。
纯 CSS，没有固定或粘性。
多年来，我一直在搜索具有自动“td”和“th”宽度的固定表头。最后我编写了一些代码，它对我来说很好用，但我不确定它是否适合每个人。
问题 1： 我们无法设置表格或 tbody 高度，但有大量“tr”，这是因为默认表格属性。
解决方法：给表格设置显示属性。
问题2：当我们设置一个显示属性时，“td”元素的宽度不能等于“th”元素的宽度。并且很难在全宽表格中正确填充元素，如 100%。
解决方案： CSS“flex”对于宽度和填充设置来说是非常好的解决方案，因此我们将使用 CSS“flex”构建我们的 tbody 和 thead 元素。
.ea_table
border: 1px solid #ddd;
display: block;
background: #fff;
overflow-y: hidden;
box-sizing: border-box;
float: left;
height:auto;
width: 100%;
.ea_table tbody, thead
flex-direction: column;
display: flex;
.ea_table tbody
height: 300px;
overflow: auto;
.ea_table thead
border-bottom: 1px solid #ddd;
.ea_table tr
display: flex;
.ea_table tbody tr:nth-child(2n+1)
background: #f8f8f8;
.ea_table td, .ea_table th
text-align: left;
font-size: 0.75rem;
padding: 1.5rem;
flex: 1;
<table class="ea_table">
<thead>
<tr>
<th>Something Long</th>
<th>Something </th>
<th>Something Very Long</th>
<th>Something Long</th>
<th>Some</th>
</tr>
</thead>
<tbody>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem </td>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
<tr>
<td> Lorem Ipsum Dolar Sit Amet</td>
<td> Lorem </td>
<td> Lorem Ipsum </td>
<td> Lorem </td>
<td> Lorem Ipsum Dolar </td>
</tr>
</tbody>
</table>jsfiddle
【讨论】：
【参考方案22】：既然“所有”浏览器都支持 ES6，我已将上述各种建议合并到一个 JavaScript 类中，该类将表格作为参数并使正文可滚动。它让浏览器的布局引擎确定标题和正文单元格的宽度，然后使列宽相互匹配。
表格的高度可以显式设置，或者填充浏览器窗口的剩余部分，并为诸如调整视口大小和/或details元素打开或关闭等事件提供回调。
多行标题支持可用，如果表使用WCAC Guidelines 中指定的可访问性的id/headers 属性尤其有效，这并不像看起来那样繁重。
代码不依赖于任何库，但如果它们被使用的话，它们会很好地配合它们。 （在使用 JQuery 的页面上测试）。
代码和示例用法可在on Github获取。
【讨论】：
【参考方案23】：没有固定宽度的简单方法：
.myTable tbody
display:block;
overflow:auto;
height:200px;
width:100%;
.myTable thead tr
display:block;
Source
现在，在 onLoad 上，要调整宽度，只需添加这个 jquery 脚本：
$.each($('.myTable tbody tr:nth(0) td'), function(k,v)
$('.myTable thead th:nth('+k+')').css('width', $(v).css('width'));
);
【讨论】：
【参考方案24】：table
overflow-y: auto;
height: 50vh; /* !!! HEIGHT MUST BE IN [ vh ] !!! */
thead th
position: sticky;
top: 0;
<table>
<thead>
<tr><th>TH 1</th><th>TH 2</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td></tr>
<tr><td>B1</td><td>B2</td></tr>
<tr><td>C1</td><td>C2</td></tr>
<tr><td>D1</td><td>D2</td></tr>
<tr><td>E1</td><td>E2</td></tr>
<tr><td>F1</td><td>F2</td></tr>
<tr><td>G1</td><td>G2</td></tr>
<tr><td>H1</td><td>H2</td></tr>
<tr><td>I1</td><td>I2</td></tr>
<tr><td>J1</td><td>J2</td></tr>
<tr><td>K1</td><td>K2</td></tr>
<tr><td>L1</td><td>L2</td></tr>
<tr><td>M1</td><td>M2</td></tr>
<tr><td>N1</td><td>N2</td></tr>
<tr><td>O1</td><td>O2</td></tr>
<tr><td>P1</td><td>P2</td></tr>
<tr><td>Q1</td><td>Q2</td></tr>
<tr><td>R1</td><td>R2</td></tr>
<tr><td>S1</td><td>S2</td></tr>
<tr><td>T1</td><td>T2</td></tr>
<tr><td>U1</td><td>U2</td></tr>
<tr><td>V1</td><td>V2</td></tr>
<tr><td>W1</td><td>W2</td></tr>
<tr><td>X1</td><td>X2</td></tr>
<tr><td>Y1</td><td>Y2</td></tr>
<tr><td>Z1</td><td>Z2</td></tr>
</tbody>
</table>你不需要 js。重要的是在 [vh] 中设置 table height
【讨论】：
工作就像一个魅力！谢谢。当标题离开屏幕时它开始浮动。正是我需要的。我确实设置了背景颜色，所以它不会与表格内容和 z-index:2 混合，所以它在前面【参考方案25】：<style>
thead, tbody
display: block;
tbody
overflow: auto;
height: 100px;
th,td
width: 120px;
</style>
<table class="table table-bordered table-striped">
<thead style="background-color:lightgreen">
<tr>
<th>Id</th><th>Name</th><th>Roll</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
<tr>
<td>1</td>
<td>Shahriar</td>
<td>12</td>
</tr>
</tbody>
</table>
【讨论】：
【参考方案26】：到目前为止，我见过的最好的解决方案是只有 CSS，good cross browser support，没有对齐问题是this solution from codingrabbithole
table
width: 100%;
thead, tbody tr
display: table;
width: 100%;
table-layout: fixed;
tbody
display: block;
overflow-y: auto;
table-layout: fixed;
max-height: 200px;
【讨论】：
我跳过了这个答案以获得下面@Roko C. Buljan 的评分更高的答案，结果发现当标题有多行时该答案不起作用。这个解决方案效果很好。非常感谢！！！ 不知道是因为我的表格是嵌套网格布局还是表格很宽，但这会在我的表格上产生最奇怪的渲染 - 就像每列都放置了几个像素向右偏移，因此每一列几乎都会覆盖前一列，导致外观非常不正常 如果您想使用<colgroup><col style="width: 10px;"><col style="width: 100px;"></colgroup> 来管理表格列的宽度，这将不起作用 - 您的所有设置都将被忽略。
用.table-scroll th:nth-child(1), .table-scroll td:nth-child(1) width: 3%; 解决了 n 列的 colgroup 问题【参考方案27】：
这是我对仅使用 div 元素和纯 CSS Flexbox 样式实现的内容可滚动表格的实现。
.table
display: flex;
flex-direction: column;
background-color: lightblue;
width: 600px;
height: 200px;
font-family: "Courier New";
.header
display: flex;
flex-direction: row;
background-color: whitesmoke;
padding-right: 10px;
font-weight: bold;
.row
border-bottom: 1px solid gainsboro;
.row>div
width: 25%;
text-align: left;
.content
height: 100%;
display: flex;
flex-direction: column;
overflow-y: scroll;
.entry
display: flex;
flex-direction: row;
padding-top: 5px;
/*
Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element.
We need the scroll bar width set so as to apply same padding in the table header row for alignment.
*/
/* width */
::-webkit-scrollbar
width: 10px;
/* Track */
::-webkit-scrollbar-track
background: whitesmoke;
border-radius: 2px;
/* Handle */
::-webkit-scrollbar-thumb
background: lightgrey;
border-radius: 2px;
/* Handle on hover */
::-webkit-scrollbar-thumb:hover
background: grey;
<div class="table">
<div class="header row">
<div>Fruit</div>
<div>Price</div>
<div>Quantity</div>
<div>In Stock</div>
</div>
<div class="content">
<div class="entry row">
<div>Apple</div>
<div>$10</div>
<div>100</div>
<div>Yes</div>
</div>
<div class="entry row">
<div>Pear</div>
<div>$2</div>
<div>900</div>
<div>No</div>
</div>
<div class="entry row">
<div>Orange</div>
<div>$3</div>
<div>123400</div>
<div>Yes</div>
</div>
<div class="entry row">
<div>Mongosteen</div>
<div>$80</div>
<div>5</div>
<div>Yes</div>
</div>
<div class="entry row">
<div>Durian</div>
<div>$120</div>
<div>988</div>
<div>Yes</div>
</div>
<div class="entry row">
<div>Apple</div>
<div>$10</div>
<div>100</div>
<div>Yes</div>
</div>
<div class="entry row">
<div>Pear</div>
<div>$2</div>
<div>900</div>
<div>No</div>
</div>
<div class="entry row">
<div>Orange</div>
<div>$3</div>
<div>123400</div>
<div>Yes</div>
</div>
<div class="entry row">
<div>Mongosteen</div>
<div>$80</div>
<div>5</div>
<div>Yes</div>
</div>
<div class="entry row">
<div>Durian</div>
<div>$120</div>
<div>988</div>
<div>Yes</div>
</div>
</div>
</div>【讨论】：
【参考方案28】：所有六个左右的 CSS 解决方案都假定了一个短表。这些应该已经测试了数百行。
【讨论】：
以上是关于表格固定标题和可滚动正文的主要内容，如果未能解决你的问题，请参考以下文章