bootstrap 表头固定方法，不用js，bootstrap固定表头，内容滑动。

最新推荐文章于 2024-08-15 09:08:34 发布

Haloby

最新推荐文章于 2024-08-15 09:08:34 发布

阅读量1.5w

点赞数 5

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/Haloby/article/details/79149512

版权

bootstrap 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实际上是用两个bootstrap的表格，一个只有表头，不滑动，另一个只有表体，div设置滑动。

代码如下：

<div>
 <table class="table table-striped">
	<thead>
	<tr>
	 <th>名称</th>
	 <th>城市</th>
	 <th>邮编</th>
	</tr>
	</thead>
 </table>
</div>
<div class="pre-scrollable" style="height: 280px; margin-top: -22px;">
	<table class="table table-striped table-hover">
		<tbody>
			<tr>
				<td>Tanmay</td>
				<td>Bangalore</td>
				<td>560001</td>
			</tr>
			<tr>
				<td>Sachin</td>
				<td>Mumbai</td>
				<td>400003</td>
			</tr>
			<tr>
				<td>Uma</td>
				<td>Pune</td>
				<td>411027</td>
			</tr>
			<tr>
				<td>Tanmay</td>
				<td>Bangalore</td>
				<td>560001</td>
			</tr>
			<tr>
				<td>Sachin</td>
				<td>Mumbai</td>
				<td>400003</td>
			</tr>
			<tr>
				<td>Uma</td>
				<td>Pune</td>
				<td>411027</td>
			</tr>
			<tr>
				<td>Tanmay</td>
				<td>Bangalore</td>
				<td>560001</td>
			</tr>
			<tr>
			 <td>Sachin</td>
			 <td>Mumbai</td>
			 <td>400003</td>
			</tr>
			<tr>
				<td>Uma</td>
				<td>Pune</td>
				<td>411027</td>
			</tr>
			<tr>
				<td>Tanmay</td>
				<td>Bangalore</td>
				<td>560001</td>
			</tr>
			<tr>
				<td>Sachin</td>
				<td>Mumbai</td>
				<td>400003</td>
			</tr>
			<tr>
				<td>Uma</td>
				<td>Pune</td>
				<td>411027</td>
			</tr>
		</tbody>
	</table>
</div>