bootstrap.固定表头，
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap.固定表头，相关的知识，希望对你有一定的参考价值。
bootstrap.固定表头，不用js代码，怎么实现把表头固定住，滚动的表头不动
参考技术A 设置表格宽度属性：colWidths: [100, 93, 93, 93, 93],追问我这个代码复制到属性里面就可以了吗
Bootstrap固定表头
1.本文参照http://www.wenzhixin.net.cn/2014/08/10/fixed_table
<!DOCTYPE html>
<html lang="en">
<link href="static/css/bootstrap/bootstrap.css" rel="stylesheet" type="text/css">
<link href="static/css/bootstrap/bootstrap-table.css" rel="stylesheet" type="text/css">
<script src="static/js/jquery/jquery-2.1.4.js"></script>
<script src="static/js/bootstrap/bootstrap.js"></script>
<script src="static/js/bootstrap/bootstrap-table.js"></script>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="fixed-table-container" style="width:1000px;height: 400px;">
<div class="fixed-table-header">
<table style="margin-bottom:0" class="table table-striped table-bordered table-hover">
</table>
</div>
<div class="fixed-table-body">
<table class="table table-striped table-bordered table-hover " style="width:2000px;">
<thead>
<tr>
<th>
<div class="th-inner">城市地区</div>
<div class="fht-cell"></div>
</th>
<th>
<div class="th-inner">城市地区</div>
<div class="fht-cell"></div>
</th>
<th>
<div class="th-inner">城市地区</div>
<div class="fht-cell"></div>
</th>
<th>
<div class="th-inner">城市地区</div>
<div class="fht-cell"></div>
</th>
<th>
<div class="th-inner">城市地区</div>
<div class="fht-cell"></div>
</th>
<th>
<div class="th-inner">城市地区</div>
<div class="fht-cell"></div>
</th>
<th>
<div class="th-inner">城市地区</div>
<div class="fht-cell"></div>
</th>
<th>
<div class="th-inner">城市地区</div>
<div class="fht-cell"></div>
</th>
<th>
<div class="th-inner">城市地区</div>
<div class="fht-cell"></div>
</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
</tr>
<tr>
<td>2</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
</tr>
<tr>
<td>3</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
</tr>
<tr>
<td>4</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
</tr>
<tr>
<td>5</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
</tr>
<tr>
<td>6</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
</tr>
<tr>
<td>7</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
</tr>
<tr>
<td>8</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
</tr>
<tr>
<td>9</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
</tr>
<tr>
<td>10</td>
<td>中国中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
<td>中国</td>
</tr>
</table>
</div>
</div>
</body>
<script>
$(".fixed-table-header table").append($(".fixed-table-body thead").clone());
$(".fixed-table-body table thead").hide();
$(".fixed-table-header").width(980);
$(".fixed-table-header table").width($(".fixed-table-body table").width());
$(".fixed-table-body table tbody").find(‘tr:first-child‘).children().each(function (i) {
$(".fixed-table-header table").find(‘div.fht-cell‘).eq(i).width($(this).width());
});
$(".fixed-table-body").scroll(function () {
$(".fixed-table-body").scrollLeft();
$(".fixed-table-header").scrollLeft($(".fixed-table-body").scrollLeft());
});
</script>
</html>
效果图：
以上是关于bootstrap.固定表头，的主要内容，如果未能解决你的问题，请参考以下文章