table表格，thead固定，tbody滚动条

 

 

想让 thead 固定 不动, tbody 增加滚动条,在样式中添加如下代码

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>table表格，thead固定，tbody滚动条</title>
    <style>
        table tbody {
            display: block;
            height: 195px;
            overflow-y: scroll;
        }

        table thead,
        tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }

        table thead {
            width: calc( 100% - 1em)
        }

        table thead th {
            background: #ccc;
        }
    </style>
</head>

<body>
    <table width="100%" border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>出生年月</th>
                <th>手机号码</th>
                <th>单位</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三封</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴与四十大盗</td>
            </tr>
            <tr>
                <td>张小三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>腾讯科技</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>浏阳河就业</td>
            </tr>
            <tr>
                <td>张三疯子</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张大三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三五</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张刘三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三封</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴与四十大盗</td>
            </tr>
            <tr>
                <td>张小三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>腾讯科技</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>浏阳河就业</td>
            </tr>
            <tr>
                <td>张三疯子</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张大三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三五</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张刘三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三封</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴与四十大盗</td>
            </tr>
            <tr>
                <td>张小三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>腾讯科技</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>浏阳河就业</td>
            </tr>
            <tr>
                <td>张三疯子</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张大三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三五</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张刘三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三封</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴与四十大盗</td>
            </tr>
            <tr>
                <td>张小三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>腾讯科技</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>浏阳河就业</td>
            </tr>
            <tr>
                <td>张三疯子</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张大三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三五</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张刘三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>1990-9-9</td>
                <td>13682299090</td>
                <td>阿里巴巴</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

 

posted on 2022-04-29 11:16  itjeff  阅读(563)  评论(0)    收藏  举报

导航