原生表格加滚动条 有点技术含量

设置原始表格有滚动条

姓名年龄出生年月手机号码单位
李四 39 yyy 167777272 百度
李四 39 yyy 167777272 百度
李四 39 yyy 167777272 百度
李四 39 yyy 167777272 百度
李四 39 yyy 167777272 百度
李四 39 yyy 167777272 百度
李四 39 yyy 167777272 百度 
<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>设置原始表格有滚动条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            /*设置相邻单元格的边框间的距离*/
            border-spacing: 0;
            /*表格设置合并边框模型*/
            border-collapse: collapse;
            text-align: center;
        }

        /*关键设置 tbody出现滚动条*/
        table tbody {
            display: block;
            height: 80px;
            overflow-y: scroll;
        }

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

        /*关键设置：滚动条默认宽度是16px 将thead的宽度减16px*/
        table thead {
            width: calc(100% - 1em)
        }


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

<body>
    <table width="80%" border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>出生年月</th>
                <th>手机号码</th>
                <th>单位</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>李四</td>
                <td>39</td>
                <td>yyy</td>
                <td>167777272</td>
                <td>百度</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>39</td>
                <td>yyy</td>
                <td>167777272</td>
                <td>百度</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>39</td>
                <td>yyy</td>
                <td>167777272</td>
                <td>百度</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>39</td>
                <td>yyy</td>
                <td>167777272</td>
                <td>百度</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>39</td>
                <td>yyy</td>
                <td>167777272</td>
                <td>百度</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>39</td>
                <td>yyy</td>
                <td>167777272</td>
                <td>百度</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>39</td>
                <td>yyy</td>
                <td>167777272</td>
                <td>百度</td>
            </tr>
           
        </tbody>
    </table>
</body>

</html>

　　

posted @ 2021-03-09 15:39  一直闭眼看世界  阅读(211)  评论(0)    收藏  举报