小开

最佳答案

为了使<tbody>元素可滚动，我们需要改变它在页面上的显示方式，即使用display: block;将其显示为块级元素。

既然我们改变了tbody的display属性，我们也应该改变thead元素的属性，以防止破坏表的布局。

所以我们有:

thead, tbody { display: block; }


tbody {
height: 100px;       /* Just for the demo          */
overflow-y: auto;    /* Trigger vertical scroll    */
overflow-x: hidden;  /* Hide the horizontal scroll */
}

Web浏览器默认将thead和tbody元素显示为row-group (table-header-group和table-row-group)。

一旦我们改变了这一点，内部的tr元素就不会填满它们容器的整个空间。

为了解决这个问题，我们必须计算tbody列的宽度，并通过JavaScript将相应的值应用到thead列。

自动宽度列

下面是上述逻辑的jQuery版本:

// Change the selector if needed
var $table = $('table'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;


// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();


// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});

下面是输出(适用于windows7 Chrome 32):

vertical scroll inside tbody

WORKING DEMO。

全宽表，相对宽度列

根据原始海报的需要，我们可以将其容器的table扩展到其容器的width的100%，然后对表的每一列使用相对的(百分比) width。

table {
width: 100%; /* Optional */
}


tbody td, thead th {
width: 20%;  /* Optional */
}

由于表有一个(类似的)流体布局，当容器调整大小时，我们应该调整thead列的宽度。

因此，一旦窗口调整大小，我们应该设置列的宽度:

// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs

输出将是:

流体表内垂直滚动

WORKING DEMO。

浏览器支持和替代方案

我在Windows 7上通过主流浏览器的新版本(包括IE10+)测试了上述两种方法，它们都有效。

然而，它不工作正确在IE9及以下。

这是因为在表layout中，所有元素都应该遵循相同的结构属性。

通过对<thead>和<tbody>元素使用display: block;，我们破坏了表的结构。

通过JavaScript重新设计布局

一种方法是重新设计(整个)表布局。使用JavaScript动态创建新布局，动态处理和/或调整单元格的宽度/高度。

例如，看看下面的例子:

jQuery < a href = " http://mkoryak.github。io / floatThead noreferrer“rel = > .floatThead () < / >插件(浮动/锁定/粘滞表头插件)
jQuery 可滚动的表 . b插件。(源代码 on github)
jQuery .FixedHeaderTable() .FixedHeaderTable(插件(源代码 on github)
DataTables vertical scrolling示例。

嵌套表

这种方法使用两个包含div的嵌套表。第一个table只有一个包含div的单元格，而第二个表位于div元素中。

检查CSS玩的垂直滚动表。

这适用于大多数浏览器。我们还可以通过JavaScript动态地执行上述逻辑。

在滚动上具有固定标题的表

由于向<tbody>添加垂直滚动条的目的是在每行的顶部显示表头，所以我们可以位置 thead元素，使fixed保留在屏幕的顶部。

下面是由Julien执行的该方法的< a href = " http://codepen。io/jgx/full/wiIGc" rel="noreferrer">Working Demo . io/jgx/full/wiIGc" rel="noreferrer 它有一个很有前途的web浏览器支持

而在这里是由威廉·范·博克斯托实现的纯CSS。

纯CSS解决方案

这是老答案。当然，我已经添加了一个新方法并改进了CSS声明。

固定宽度的表格

在这种情况下，table应该有一个固定的width (包括各列宽度与垂直滚动条宽度之和)。

每个列都应该有一个特定的宽度，并且thead元素的最后一列需要一个更大的宽度，它等于其他元素的宽度 +垂直滚动条的宽度。

因此，CSS将是:

table {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
}


tbody, thead tr { display: block; }


tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}


tbody td, thead th {
width: 140px;
}


thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}

输出如下:

固定宽度表

WORKING DEMO。

100%宽度的表格

在这种方法中，table的宽度为100%，对于每个th和td， width属性的值应该小于100% / number of cols。

同样，我们需要将thead的宽度减少为垂直滚动条的宽度的值。

为了做到这一点，我们需要使用CSS3 calc()函数，如下所示:

table {
width: 100%;
border-spacing: 0;
}


thead, tbody, tr, th, td { display: block; }


thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width:    -moz-calc(100% - 16px);
width:         calc(100% - 16px);
}


tr:after {  /* clearing float */
content: ' ';
display: block;
visibility: hidden;
clear: both;
}


tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}


tbody td, thead th {
width: 19%;  /* 19% is less than (100% / 5 cols) = 20% */
float: left;
}

这里是在线演示 .。

注意:如果每一列的内容换行，则此方法将失败，即每个单元格的内容应该足够短。

在下面，有两个简单的纯CSS解决方案的例子，是我在回答这个问题时创建的。

这里是jsFiddle Demo v2。

旧版本:jsFiddle Demo v1

小开

我使用display:block为thead和tbody。因此，thead列的宽度与tbody列的宽度不同

table {
margin:0 auto;
border-collapse:collapse;
}
thead {
background:#CCCCCC;
display:block
}
tbody {
height:10em;overflow-y:scroll;
display:block
}

为了解决这个问题，我使用了小的jQuery代码，但它只能在JavaScript中完成。

var colNumber=3 //number of table columns


for (var i=0; i<colNumber; i++) {
var thWidth=$("#myTable").find("th:eq("+i+")").width();
var tdWidth=$("#myTable").find("td:eq("+i+")").width();
if (thWidth<tdWidth)
$("#myTable").find("th:eq("+i+")").width(tdWidth);
else
$("#myTable").find("td:eq("+i+")").width(thWidth);
}

这是我的工作演示: http://jsfiddle.net/gavroche/N7LEF/ < / p >

在IE 8中不能工作

var colNumber=3 //number of table columns




for (var i=0; i<colNumber; i++)
{
var thWidth=$("#myTable").find("th:eq("+i+")").width();
var tdWidth=$("#myTable").find("td:eq("+i+")").width();
if (thWidth<tdWidth)
$("#myTable").find("th:eq("+i+")").width(tdWidth);
else
$("#myTable").find("td:eq("+i+")").width(thWidth);
}

 table {margin:0 auto; border-collapse:separate;}
thead {background:#CCCCCC;display:block}
tbody {height:10em;overflow-y:scroll;display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable" border="1">
<thead>
<tr>
<th>A really Very Long Header Text</th>
<th>Normal Header</th>
<th>Short</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
<tr>
<td>
Text shorter than header
</td>
<td>
Text is longer than header
</td>
<td>
Exact
</td>
</tr>
</tbody>
</table>

小开

我得到了它最终与纯CSS通过以下说明:

http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/

第一步是将<tbody>设置为display: block，以便应用溢出和高度。从这里开始，<thead>中的行需要被设置为position: relative和display: block，这样它们就会位于现在可滚动的<tbody>之上。

tbody, thead { display: block; overflow-y: auto; }

因为<thead>是相对定位的，所以每个表单元格都需要显式的宽度

td:nth-child(1), th:nth-child(1) { width: 100px; }
td:nth-child(2), th:nth-child(2) { width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }

但不幸的是，这还不够。当滚动条出现时，浏览器为它分配空间，因此，<tbody>的可用空间最终比<thead>少。注意这造成的轻微错位…

我能想到的唯一解决办法是在除最后一列之外的所有列上设置最小宽度。

td:nth-child(1), th:nth-child(1) { min-width: 100px; }
td:nth-child(2), th:nth-child(2) { min-width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }

完整的代码依赖示例如下:

CSS:

.fixed_headers {
width: 750px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
width: 350px;
}
.fixed_headers thead {
background-color: #333333;
color: #fdfdfd;
}
.fixed_headers thead tr {
display: block;
position: relative;
}
.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #dddddd;
}
.old_ie_wrapper {
height: 300px;
width: 750px;
overflow-x: hidden;
overflow-y: auto;
}
.old_ie_wrapper tbody {
height: auto;
}

Html:

<!-- IE < 10 does not like giving a tbody a height.  The workaround here applies the scrolling to a wrapped <div>. -->
<!--[if lte IE 9]>
<div class="old_ie_wrapper">
<!--<![endif]-->


<table class="fixed_headers">
<thead>
<tr>
<th>Name</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Plum</td>
<td>Purple</td>
<td>These are Purple</td>
</tr>
<tr>
<td>Watermelon</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Tomato</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cherry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Cantelope</td>
<td>Orange</td>
<td>These are orange inside.</td>
</tr>
<tr>
<td>Honeydew</td>
<td>Green</td>
<td>These are green inside.</td>
</tr>
<tr>
<td>Papaya</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Raspberry</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Blueberry</td>
<td>Blue</td>
<td>These are blue.</td>
</tr>
<tr>
<td>Mango</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Passion Fruit</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>


<!--[if lte IE 9]>
</div>
<!--<![endif]-->

编辑:表宽100%的替代解决方案(上面实际上是固定宽度，没有回答这个问题):

HTML:

<table>
<thead>
<tr>
<th>Name</th>
<th>Color</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Red</td>
<td>These are red.</td>
</tr>
<tr>
<td>Pear</td>
<td>Green</td>
<td>These are green.</td>
</tr>
<tr>
<td>Grape</td>
<td>Purple / Green</td>
<td>These are purple and green.</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
<td>These are orange.</td>
</tr>
<tr>
<td>Banana</td>
<td>Yellow</td>
<td>These are yellow.</td>
</tr>
<tr>
<td>Kiwi</td>
<td>Green</td>
<td>These are green.</td>
</tr>
</tbody>
</table>

CSS:

table {
width: 100%;
text-align: left;
min-width: 610px;
}
tr {
height: 30px;
padding-top: 10px
}
tbody {
height: 150px;
overflow-y: auto;
overflow-x: hidden;
}
th,td,tr,thead,tbody { display: block; }
td,th { float: left; }
td:nth-child(1),
th:nth-child(1) {
width: 20%;
}
td:nth-child(2),
th:nth-child(2) {
width: 20%;
float: left;
}
td:nth-child(3),
th:nth-child(3) {
width: 59%;
float: left;
}
/* some colors */
thead {
background-color: #333333;
color: #fdfdfd;
}
table tbody tr:nth-child(even) {
background-color: #dddddd;
}

演示:http://codepen.io/anon/pen/bNJeLO

小开

使用“block”tbody强制列正确显示的Css解决方案

这个解决方案仍然需要th宽度由jQuery计算和设置

table.scroll tbody,
table.scroll thead { display: block; }


table.scroll tbody {
overflow-y: auto;
overflow-x: hidden;
max-height: 300px;
}


table.scroll tr {
display: flex;
}


table.scroll tr > td {
flex-grow: 1;
flex-basis: 0;
}

Jquery / Javascript

var $table = $('#the_table_element'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;


$table.addClass('scroll');


// Adjust the width of thead cells when window resizes
$(window).resize(function () {


// Get the tbody columns width array
colWidth = $bodyCells.map(function () {
return $(this).width();
}).get();


// Set the width of thead columns
$table.find('thead tr').children().each(function (i, v) {
$(v).width(colWidth[i]);
});


}).resize(); // Trigger resize handler

小开

尝试下面的方法，非常简单，易于实现

下面是jsfiddle链接

http://jsfiddle.net/v2t2k8ke/2/

HTML:

<table border='1' id='tbl_cnt'>
<thead><tr></tr></thead><tbody></tbody>

CSS:

 #tbl_cnt{
border-collapse: collapse; width: 100%;word-break:break-all;
}
#tbl_cnt thead, #tbl_cnt tbody{
display: block;
}
#tbl_cnt thead tr{
background-color: #8C8787; text-align: center;width:100%;display:block;
}
#tbl_cnt tbody {
height: 100px;overflow-y: auto;overflow-x: hidden;
}

Jquery:

 var data = [
{
"status":"moving","vehno":"tr544","loc":"bng","dri":"ttt"
}, {
"status":"stop","vehno":"tr54","loc":"che", "dri":"ttt"
},{    "status":"idle","vehno":"yy5499999999999994","loc":"bng","dri":"ttt"
},{
"status":"moving","vehno":"tr544","loc":"bng", "dri":"ttt"
}, {
"status":"stop","vehno":"tr54","loc":"che","dri":"ttt"
},{
"status":"idle","vehno":"yy544","loc":"bng","dri":"ttt"
}
];
var sth = '';
$.each(data[0], function (key, value) {
sth += '<td>' + key + '</td>';
});
var stb = '';
$.each(data, function (key, value) {
stb += '<tr>';
$.each(value, function (key, value) {
stb += '<td>' + value + '</td>';
});
stb += '</tr>';
});
$('#tbl_cnt thead tr').append(sth);
$('#tbl_cnt tbody').append(stb);
setTimeout(function () {
var col_cnt=0
$.each(data[0], function (key, value) {col_cnt++;});
$('#tbl_cnt thead tr').css('width', ($("#tbl_cnt tbody") [0].scrollWidth)+ 'px');
$('#tbl_cnt thead tr td,#tbl_cnt tbody tr td').css('width',  ($('#tbl_cnt thead tr ').width()/Number(col_cnt)) + 'px');}, 100)

小开

在下面的解决方案中，表占用了100%的父容器，不需要绝对大小。它是纯CSS，使用flex布局。

下面是它的样子: enter image description here

可能的缺点:

垂直滚动条总是可见的，不管它是否是必需的;
表格布局是固定的-列不会根据内容宽度调整大小(你仍然可以显式地设置任何你想要的列宽度);
有一个绝对大小——滚动条的宽度，对于我能够检查的浏览器来说，它大约是0.9em。

HTML(缩短):

<div class="table-container">
<table>
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tbody>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
<tr>
<td>content1</td>
<td>content2</td>
<td>content3</td>
<td>content4</td>
</tr>
...
</tbody>
</table>
</div>

CSS，为了清晰起见省略了一些装饰:

.table-container {
height: 10em;
}
table {
display: flex;
flex-flow: column;
height: 100%;
width: 100%;
}
table thead {
/* head takes the height it requires,
and it's not scaled when table is resized */
flex: 0 0 auto;
width: calc(100% - 0.9em);
}
table tbody {
/* body takes all the remaining available space */
flex: 1 1 auto;
display: block;
overflow-y: scroll;
}
table tbody tr {
width: 100%;
}
table thead, table tbody tr {
display: table;
table-layout: fixed;
}

jsfiddle的完整代码

相同的代码在LESS，所以你可以混合在:

.table-scrollable() {
@scrollbar-width: 0.9em;
display: flex;
flex-flow: column;


thead,
tbody tr {
display: table;
table-layout: fixed;
}


thead {
flex: 0 0 auto;
width: ~"calc(100% - @{scrollbar-width})";
}


tbody {
display: block;
flex: 1 1 auto;
overflow-y: scroll;


tr {
width: 100%;
}
}
}

小开

依次创建两个表，将第二个表放在固定高度的div中，并将溢出属性设置为auto。同时保持所有td的内头在第二表空。

<div>
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
</table>
</div>


<div style="max-height:500px;overflow:auto;">
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
</div>

小开

在tbody &thead显示块工作完美，我们也可以使用slimscroll插件使滚动条漂亮。

<!DOCTYPE html>
<html>


<head>
<title> Scrollable table </title>
<style>
body {
font-family: sans-serif;
font-size: 0.9em;
}
table {
border-collapse: collapse;
border-bottom: 1px solid #ddd;
}
thead {
background-color: #333;
color: #fff;
}
thead,tbody {
display: block;
}
th,td {
padding: 8px 10px;
border: 1px solid #ddd;
width: 117px;
box-sizing: border-box;
}
tbody {
height: 160px;
overflow-y: scroll
}
</style>
</head>


<body>


<table class="example-table">
<thead>
<tr>
<th> Header 1 </th>
<th> Header 2 </th>
<th> Header 3 </th>
<th> Header 4 </th>
</tr>
</thead>
<tbody>
<tr>
<td> Row 1- Col 1 </td>
<td> Row 1- Col 2 </td>
<td> Row 1- Col 3 </td>
<td> Row 1- Col 4 </td>
</tr>
<tr>
<td> Row 2- Col 1 </td>
<td> Row 2- Col 2 </td>
<td> Row 2- Col 3 </td>
<td> Row 2- Col 4 </td>
</tr>
<tr>
<td> Row 3- Col 1 </td>
<td> Row 3- Col 2 </td>
<td> Row 3- Col 3 </td>
<td> Row 3- Col 4 </td>
</tr>
<tr>
<td> Row 4- Col 1 </td>
<td> Row 4- Col 2 </td>
<td> Row 4- Col 3 </td>
<td> Row 4- Col 4 </td>
</tr>
<tr>
<td> Row 5- Col 1 </td>
<td> Row 5- Col 2 </td>
<td> Row 5- Col 3 </td>
<td> Row 5- Col 4 </td>
</tr>
<tr>
<td> Row 6- Col 1 </td>
<td> Row 6- Col 2 </td>
<td> Row 6- Col 3 </td>
<td> Row 6- Col 4 </td>
</tr>
<tr>
<td> Row 7- Col 1 </td>
<td> Row 7- Col 2 </td>
<td> Row 7- Col 3 </td>
<td> Row 7- Col 4 </td>
</tr>
<tr>
<td> Row 8- Col 1 </td>
<td> Row 8- Col 2 </td>
<td> Row 8- Col 3 </td>
<td> Row 8- Col 4 </td>
</tr>
<tr>
<td> Row 9- Col 1 </td>
<td> Row 9- Col 2 </td>
<td> Row 9- Col 3 </td>
<td> Row 9- Col 4 </td>
</tr>
<tr>
<td> Row 10- Col 1 </td>
<td> Row 10- Col 2 </td>
<td> Row 10- Col 3 </td>
<td> Row 10- Col 4 </td>
</tr>
<tr>
<td> Row 11- Col 1 </td>
<td> Row 11- Col 2 </td>
<td> Row 11- Col 3 </td>
<td> Row 11- Col 4 </td>
</tr>
<tr>
<td> Row 12- Col 1 </td>
<td> Row 12- Col 2 </td>
<td> Row 12- Col 3 </td>
<td> Row 12- Col 4 </td>
</tr>
<tr>
<td> Row 13- Col 1 </td>
<td> Row 13- Col 2 </td>
<td> Row 13- Col 3 </td>
<td> Row 13- Col 4 </td>
</tr>
<tr>
<td> Row 14- Col 1 </td>
<td> Row 14- Col 2 </td>
<td> Row 14- Col 3 </td>
<td> Row 14- Col 4 </td>
</tr>
<tr>
<td> Row 15- Col 1 </td>
<td> Row 15- Col 2 </td>
<td> Row 15- Col 3 </td>
<td> Row 15- Col 4 </td>
</tr>
<tr>
<td> Row 16- Col 1 </td>
<td> Row 16- Col 2 </td>
<td> Row 16- Col 3 </td>
<td> Row 16- Col 4 </td>
</tr>
</tbody>
</table>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
<script>
$('.example-table tbody').slimscroll({
height: '160px',
alwaysVisible: true,
color: '#333'
})
</script>
</body>


</html>

小开

在现代浏览器中，你可以简单地使用css:

th {
position: sticky;
top: 0;
z-index: 2;
}

小开

这是为我工作的代码，在一个可滚动的tbody表上创建一个粘头:

table ,tr td{
border:1px solid red
}
tbody {
display:block;
height:50px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
width:400px;
}

小开

CSS-only

用于Chrome, Firefox, Edge(以及其他常绿浏览器)

简单地position: sticky; top: 0;你的th元素:

/* Fix table head */
.tableFixHead    { overflow: auto; height: 100px; }
.tableFixHead th { position: sticky; top: 0; }


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

PS:如果你需要边界的TH元素th {box-shadow: 1px 1px 0 #000; border-top: 0;}将有帮助(因为默认的边界没有正确绘制在滚动)。

对于上面的一个变体，为了适应IE11，只使用了一点JS，请参阅这个答案表固定头和可滚动体 .

小开

使用“溢出:滚动”;您必须设置“display:block”;在头上和身上。这会打乱它们之间的列宽。但随后你可以用Javascript复制标题行，并将其作为隐藏行粘贴到tbody中，以保持准确的col宽度。

$('.myTable thead > tr')
.clone()
.appendTo('.myTable tbody')
.addClass('hidden-to-set-col-widths')
;

http://jsfiddle.net/Julesezaar/mup0c5hk/

    <table class="myTable">
<thead>
<tr>
<td>Problem</td>
<td>Solution</td>
<td>blah</td>
<td>derp</td>
</tr>
</thead>
<tbody></tbody>
</table>
<p>
Some text to here
</p>

css:


table {
background-color: #aaa;
width: 100%;
}
    

thead,
tbody {
display: block; // Necessary to use overflow: scroll
}
    

tbody {
background-color: #ddd;
height: 150px;
overflow-y: scroll;
}
    

tbody tr.hidden-to-set-col-widths,
tbody tr.hidden-to-set-col-widths td {
visibility: hidden;
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
}
    

td {
padding: 3px 10px;
}

小开

试试这个jsfiddle。这是使用jQuery，并从Hashem Qolami的答案。首先，创建一个常规的表格，然后使其可滚动。

const makeScrollableTable = function (tableSelector, tbodyHeight) {
let $table = $(tableSelector);
let $bodyCells = $table.find('tbody tr:first').children();
let $headCells = $table.find('thead tr:first').children();
let headColWidth = 0;
let bodyColWidth = 0;
  

headColWidth = $headCells.map(function () {
return $(this).outerWidth();
}).get();
bodyColWidth = $bodyCells.map(function () {
return $(this).outerWidth();
}).get();


$table.find('thead tr').children().each(function (i, v) {
$(v).css("width", headColWidth[i]+"px");
$(v).css("min-width", headColWidth[i]+"px");
$(v).css("max-width", headColWidth[i]+"px");
});
$table.find('tbody tr').children().each(function (i, v) {
$(v).css("width", bodyColWidth[i]+"px");
$(v).css("min-width", bodyColWidth[i]+"px");
$(v).css("max-width", bodyColWidth[i]+"px");
});


$table.find('thead').css("display", "block");
$table.find('tbody').css("display", "block");


$table.find('tbody').css("height", tbodyHeight+"px");
$table.find('tbody').css("overflow-y", "auto");
$table.find('tbody').css("overflow-x", "hidden");
  

};

该函数的使用方法如下:

makeScrollableTable('#test-table', 250);

100%宽度的HTML表格，内部垂直滚动

自动宽度列

全宽表，相对宽度列

浏览器支持和替代方案

通过JavaScript重新设计布局

嵌套表

在滚动上具有固定标题的表

纯CSS解决方案

固定宽度的表格

100%宽度的表格

使用“block”tbody强制列正确显示的Css解决方案

CSS-only