<!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.width() + 16 ) + 20) + 'px');
</script>
</html>表格头部固定(列定宽)
猜你喜欢
转载自www.cnblogs.com/afang/p/9233699.html
今日推荐
周排行