bootstrap 表格表头固定

最新推荐文章于 2025-03-17 12:00:46 发布

mt23

最新推荐文章于 2025-03-17 12:00:46 发布

阅读量1.1w

点赞数 3

文章标签： bootstrap css 布局

本文链接：https://blog.youkuaiyun.com/mathcoder23/article/details/75268950

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

效果是在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 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 移动端1：1缩放达到缩放布局不乱的效果 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        th{
            text-align:center;
        }
        table{
            text-align:center;
        }
        .fixedhead{
            position: fixed;
            background: white;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <!-- 仅含表头的表格，与下面的表格表头必须一致，然后将此表的css设置为position:fixed，脱离文档流，达到表头固定的效果-->
    <table class="table table-bordered table-striped fixedhead" id="fixedhead">
        <thead>
        <tr>
            <th>用户名</th>
            <th>密码</th>
            <th>状态</th>
        </tr>
        </thead>

    </table>
    <!-- 含有数据的表格，实际上表头的内容不会被显示，因为会被上面的表覆盖，但也不要删除表头，因为需要占位，否则表中第一行数据无法看到。-->
    <table class="table table-bordered table-striped" id="user_table" >
        <thead>
        <tr>
            <th>用户名</th>
            <th>密码</th>
            <th>状态</th>
        </tr>
        </thead>
        <tbody id="user_table_tbody">
        <script>
            //固定表头的宽度，自适应user_table的宽度
            function autoWidth()
            {
                 document.getElementById("fixedhead").style.width =  document.getElementById("user_table").offsetWidth;

            }

            window.onresize = function () {
                //当窗口重绘，重新适应宽度
                autoWidth();
            }
            window.onload = function(){
             //页面加载完毕，表头表的自适应宽度
             autoWidth(); 
            }

            //批量生成表格数据
            var tbody = document.getElementById("user_table_tbody");
            var inner = "";
            for (var i=0;i<100;i++) {
                 inner += "<tr>";
                    for (var j=0;j<3;j++) {
                        inner += "<td>" +i+j + "</td>";
                    }
                    inner += "</tr>"
                }
           tbody.innerHTML = inner;


        </script>
        </tbody>
    </table>
</div>
</body>
</html>