小开

你应该尝试使用"display:block;"到tbody，因为现在它是内联块，为了设置高度，元素应该是"block"

小开

最佳答案

以下是有效的解决方案:

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

小开

对于纯CSS方法，你需要一个带有overflow-y: auto;的容器，并决定如何隐藏滚动/溢出的行:

通过非透明粘头(position: sticky; top: 0; z-index: 1;)覆盖，就像@RokoCBuljan的回答。
切换行可见性(通过如下所示设置tr:after属性)。

请注意，容器可以是一个外部的<div>，或者<table>本身，或者它的一部分(例如<tbody>)。对于后两个，你必须设置display: block;，以便有效地将它们视为__abc4。

请看下面一个修改后的@giulio的解决方案:

:root {
--height-height: 150px;
/* cell width has to reserve some space for scrolling. Hence the sum < 100% */
--cell-width: 85px;
}


.header-fixed {
width: 200px;
}


/* Treat all as divs */
.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;
}


/* Prevent header to wrap */
.header-fixed > thead > tr > th {
white-space: nowrap;
background-color: lightgrey;
}


.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}


.header-fixed > tbody {
overflow-y: auto;
height: var(--height-height);
}


.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
width: var(--cell-width);
border: thin solid grey;
float: left;
}

<table class="header-fixed">
<thead>
<tr> <th>Header 1</th> <th>Header 2</th> </tr>
</thead>
<tbody>
<tr> <td>cell 11</td> <td>cell 12</td> </tr>
<tr> <td>cell 21</td> <td>cell 22</td> </tr>
<tr> <td>cell 31</td> <td>cell 32</td> </tr>
<tr> <td>cell 41</td> <td>cell 42</td> </tr>
<tr> <td>cell 51</td> <td>cell 52</td> </tr>
<tr> <td>cell 61</td> <td>cell 62</td> </tr>
<tr> <td>cell 71</td> <td>cell 72</td> </tr>
<tr> <td>cell 81</td> <td>cell 82</td> </tr>
<tr> <td>cell 91</td> <td>cell 92</td> </tr>
</tbody>
</table>

注意:如果你有>2列，你需要相应地调整var(--cell-width)变量。

小开

不需要用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;
}

__abc0: __abc1

小开

使用这个链接，stackoverflow.com/a/17380697/1725764，由Hashem Qolami在原始帖子的评论中使用，并使用display:inline-blocks而不是floats。如果表也有'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%;
}
}

小开

更新

对于更新且仍在维护的库，请尝试< >强jquery.floatThead < / >强 (正如Bob Jordan在评论中提到的)。

旧的答案

这是一个很古老的答案，下面提到的图书馆已经不再维护了。

我在GitHub上使用< >强StickyTableHeaders < / >强，它的工作就像魅力!

我必须添加这个css，使头部不透明。

table#stickyHeader thead {
border-top: none;
border-bottom: none;
background-color: #FFF;
}

小开

在我看来，jQuery最好的插件之一是datatable。

它也有固定头的扩展，并且非常容易实现。

摘自网站:

HTML:

<table id="example" class="display" cellspacing="0" width="100%">
<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>

JavaScript:

$(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
});

小开

您可以放置两个div，其中第一个div(标题)将有透明的滚动条和第二个div将有数据与可见/自动滚动条。示例中有用于遍历数据的角代码片段。

下面的代码为我工作-

<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>

小开

迟到的派对(我的生活的故事)，但由于这是谷歌上的第一个结果，上面没有一个让我工作，下面是我的代码

/*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;
}

小开

我在让stickytableheaders库工作时遇到了很多麻烦。做了更多的搜索，我发现floatThead是一个积极维护的替代品，最近更新和更好的文档。

小开

固定表头- 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>

对于两者黏黏的垂直TH和水平TH列(在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>

TH粘不工作修复

确保父元素"th"元素，至少直到table元素(包括)，不设置overflow相关的样式(例如overflow， overflow-x， overflow-y)。

详情见stackoverflow.com/为什么position: sticky不起作用?

固定表头-使用JS。(即)

你可以使用一些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(${sT}px)`
);
}
document.querySelectorAll(".tableFixHead").forEach(el =>
el.addEventListener("scroll", tableFixHead)
);

小开

使用css更容易

table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }

小开

不管它现在有什么价值:我确实发布了一个解决方案到一个姐妹线程表滚动与HTML和CSS

接受两个表(一个仅用于头部，一个用于所有-由浏览器布局)
摆放完毕后，将上桌(仅限人头)调整到下桌的宽度
隐藏(visibility，而不是display)下表的头，并使下表在div中可滚动w/

解决方案是不可知的任何风格/框架使用-所以它可能在这里也是有用的…

一个很长的描述在表滚动与HTML和CSS中/代码也在这支笔中:https://codepen.io/sebredhh/pen/QmJvKy

小开

首先为引导表添加一些标记。在这里，我创建了一个条纹表，但也添加了一个自定义表类.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;
}

小开

把表格像这样放在div里面，使表格垂直滚动。将__abc0改为overflow-x使表可以水平滚动。只是overflow使表可以水平和垂直滚动。

<div style="overflow-y: scroll;">
<table>
...
</table>
</div>

小开

清洁解决方案(仅适用于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

小开

最新的添加位置:“粘性”将是这里最简单的解决方案

.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>

小开

我使用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');
}
});
});

< >强完全免责声明: 我没有以任何方式与插件相关联。在尝试了这里和其他地方发布的许多其他解决方案后，我碰巧发现了它

小开

对于满高的表格(页面滚动，而不是表格)

注意:我移动了整个<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;
}

小开

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`

小开

在一个窗口中支持多个可滚动表。

纯CSS &没有固定或粘性。

我正在搜索固定的表头与自动“td”和“th”宽度多年。最后我写了一些东西，这对我来说很好，但我不确定它对每个人都很好。

问题1:当我们有大量的“tr”时，我们不能设置表或表体高度，这是因为默认的表属性。

解决方案:设置表的显示属性。

问题2:当我们设置一个display属性时，"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

小开

既然“所有”浏览器都支持ES6，我已经将上面的各种建议合并到一个JavaScript类中，该类以表作为参数，并使主体可滚动。它让浏览器的布局引擎确定标题和主体单元格的宽度，然后使列的宽度相互匹配。

表的高度可以显式设置，或者填充浏览器窗口的剩余部分，并提供事件的回调，如视口调整大小和/或details元素的打开或关闭。

多行标头支持是可用的，如果表使用WCAC指南中指定的id/headers属性作为可访问性，这是特别有效的，这并不像看起来那样是一个繁重的需求。

代码不依赖于任何库，但如果使用它们，则可以很好地使用它们。(在使用JQuery的页面上测试)。

代码和样例使用方法可用Github上。

小开

一种没有固定宽度的简单方法:

.myTable tbody{
display:block;
overflow:auto;
height:200px;
width:100%;
}
.myTable thead tr{
display:block;
}

来源

现在，在onLoad上，调整宽度，只需添加这个jquery脚本:

$.each($('.myTable tbody tr:nth(0) td'), function(k,v) {
$('.myTable thead th:nth('+k+')').css('width', $(v).css('width'));
});

小开

table {
overflow-y: auto;
height: 50vh;     /* !!!  HEIGHT MUST BE IN [ vh ] !!! */
}


thead th {
background-color: white;
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]中设置桌子的高度

小开

<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>

小开

到目前为止，我所见过的最好的解决方案是CSS，使用良好的跨浏览器支持，没有对齐问题的这个解决方案来自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;
}

小开

这是一个内容可滚动表的实现，只使用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>

参见Pen 可滚动表- CSS仅 by Ruifeng Ma (@maruifeng) CodePen。

小开

所有六个左右的CSS解决方案都假设一个短表。这些代码应该用几百行的代码进行测试。

小开

根据@Roko C. Buljan的回答，如果你尝试添加行span，当你滚动时，只有第一个th将是fixed。

.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 rowspan="3">TH 1</th>
<th>TH 2.1</th>
<th>TH 3.1</th>
</tr>
<tr >
<th>TH 2.2</th>
<th>TH 3.2</th>
</tr>
<tr >
<th>TH 2.3</th>
<th>TH 3.3</th>
</tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td><td>A3</td></tr>
<tr><td>B1</td><td>B2</td><td>B3</td></tr>
<tr><td>C1</td><td>C2</td><td>C3</td></tr>
<tr><td>D1</td><td>D2</td><td>D3</td></tr>
<tr><td>E1</td><td>E2</td><td>E3</td></tr>
</tbody>
</table>
</div>

如果你想固定行跨度，你可以添加这行

.tableFixHead thead tr:nth-child(2) th {
top: 34px; /* change the number according to your need  */
}


.tableFixHead thead tr:nth-child(3) th {
top: 68px; /* change the number according to your need  */
}

作为示例，您可以检查这个片段

.tableFixHead          { overflow: auto; height: 200px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }


.tableFixHead thead tr:nth-child(2) th {
top: 34px; /* change the number according to your need  */
}


.tableFixHead thead tr:nth-child(3) th {
top: 68px; /* change the number according to your need  */
}


/* 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 rowspan="3">TH 1</th>
<th>TH 2.1</th>
<th>TH 3.1</th>
</tr>
<tr >
<th>TH 2.2</th>
<th>TH 3.2</th>
</tr>
<tr >
<th>TH 2.3</th>
<th>TH 3.3</th>
</tr>
</thead>
<tbody>
<tr><td>A1</td><td>A2</td><td>A3</td></tr>
<tr><td>B1</td><td>B2</td><td>B3</td></tr>
<tr><td>C1</td><td>C2</td><td>C3</td></tr>
<tr><td>D1</td><td>D2</td><td>D3</td></tr>
<tr><td>E1</td><td>E2</td><td>E3</td></tr>
</tbody>
</table>
</div>

如果你用nth-child(number)手动指定number，上面的代码段将正常工作

小开

刚刚发现一个很酷的解决方案使用网格! 这是我使用的，它完美地工作:

tbody tr, thead tr {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr; // or whatever division you wanna do
}


tbody {
height: 300px; // or whatever height
width: 100%;
overflow-y: auto;
display: block;
}

< p >演示: https://codesandbox.io/s/table-with-inner-body-scroll-hggq7x < / p >

表头固定，体可滚动

固定表头- css

TH边界问题修复

TH粘不工作修复

固定表头-使用JS。(即)