bootstrap 表格表头固定

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

mt23

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

阅读量1.1w

点赞数 3

文章标签： bootstrap css 布局

本文链接：https://blog.csdn.net/mathcoder23/article/details/75268950

版权

本文介绍了如何在Bootstrap中实现表格表头固定的效果，适用于PC和移动端，即使在缩放时也能保持布局整洁。主要利用CSS的position属性来实现表头的固定。

摘要由CSDN通过智能技术生成

效果

效果是在pc端和移动端能够使表格的表头固定，并且在顶部，支持缩放时布局不乱。

核心技术

利用css的position:fixed 属性来脱离文档流，达到表头固定的效果。

代码

说明都在代码里面，这里就不多说了。

<html>
<head>
    <title>用户表</title>
    <!-- jquery库-->
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <