<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="renderer" content="webkit" />
<title>头部固定的表格</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style>
.table-showlist {
overflow-x: auto;
}
.table-showlist .table thead {
display: block;
}
.table-showlist tbody {
display: block;
width: 100%;
height: 230px;
overflow-y: auto;
}
.table-showlist .table td,
.table-showlist .table th {
display: inline-block;
width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="table-showlist col-xs-6">
<table id="textTable" class="table">
<thead>
<tr>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
<th>姓名</th>
</tr>
</thead>
<tbody id="testTbody">
<tr>
<td>烦烦烦烦烦烦烦烦烦烦烦烦烦</td>
<td>123456456</td>
<td>健康健康就好看过</td>
<td>好看过</td>
<td>与国际接轨的号发给发给对方广泛的</td>
</tr>
<tr>
<td>烦烦烦烦烦烦烦烦烦烦烦烦烦</td>
<td>123456456</td>
<td>健康健康就好看过</td>
<td>好看过</td>
<td>与国际接轨的号发给发给对方广泛的</td>
</tr>
<tr>
<td>烦烦烦烦烦烦烦烦烦烦烦烦烦</td>
<td>123456456</td>
<td>健康健康就好看过</td>
<td>好看过</td>
<td>与国际接轨的号发给发给对方广泛的</td>
</tr>
<tr>
<td>烦烦烦烦烦烦烦烦烦烦烦烦烦</td>
<td>123456456</td>
<td>健康健康就好看过</td>
<td>好看过</td>
<td>与国际接轨的号发给发给对方广泛的</td>
</tr>
<tr>
<td>烦烦烦烦烦烦烦烦烦烦烦烦烦</td>
<td>123456456</td>
<td>健康健康就好看过</td>
<td>好看过</td>
<td>与国际接轨的号发给发给对方广泛的</td>
</tr>
<tr>
<td>烦烦烦烦烦烦烦烦烦烦烦烦烦</td>
<td>123456456</td>
<td>健康健康就好看过</td>
<td>好看过</td>
<td>与国际接轨的号发给发给对方广泛的</td>
</tr>
<tr>
<td>烦烦烦烦烦烦烦烦烦烦烦烦烦</td>
<td>123456456</td>
<td>健康健康就好看过</td>
<td>好看过</td>
<td>与国际接轨的号发给发给对方广泛的</td>
</tr>
<tr>
<td>烦烦烦烦烦烦烦烦烦烦烦烦烦</td>
<td>123456456</td>
<td>健康健康就好看过</td>
<td>好看过</td>
<td>与国际接轨的号发给发给对方广泛的</td>
</tr>
<tr>
<td>烦烦烦烦烦烦烦烦烦烦烦烦烦</td>
<td>123456456</td>
<td>健康健康就好看过</td>
<td>好看过</td>
<td>与国际接轨的号发给发给对方广泛的</td>
</tr>
<tr>
<td>烦烦烦烦烦烦烦烦烦烦烦烦烦</td>
<td>123456456</td>
<td>健康健康就好看过</td>
<td>好看过</td>
<td>与国际接轨的号发给发给对方广泛的</td>
</tr>
<tr>
<td>烦烦烦烦烦烦烦烦烦烦烦烦烦</td>
<td>123456456</td>
<td>健康健康就好看过</td>
<td>好看过</td>
<td>与国际接轨的号发给发给对方广泛的</td>
</tr>
<tr>
<td>烦烦烦烦烦烦烦烦烦烦烦烦烦</td>
<td>123456456</td>
<td>健康健康就好看过</td>
<td>好看过</td>
<td>与国际接轨的号发给发给对方广泛的</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var tableTh = $(\'.table-showlist .table thead th\')
$(\'.table-showlist .table thead\').css(\'width\', (tableTh.length * tableTh.outerWidth() + 20) + \'px\');
</script>
</html>```相关文章：
- 固定表头表格 2022-01-02
- bootstrap-table固定表头固定列 2021-10-15
- 表格-固定列 固定行 2022-12-23
- html 表格固定宽度 2021-12-04
- 表头固定的表格 2021-12-23
- Bsgrid表格表头固定 2021-05-29
- Javascript 固定表格表头 2021-11-04
- Jquery 表格固定表头 2021-11-26