bootstrap 表格表头固定

效果

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

核心技术

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

代码

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

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

    
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

    
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
    
    <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">
    
    <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 += "";
                    for (var j=0;j<3;j++) {
                        inner += "" +i+j + "";
                    }
                    inner += ""
                }
           tbody.innerHTML = inner;


        script>
        tbody>
    table>
div>
body>
html>

你可能感兴趣的:(bootstrap,css,布局)