html table表格固定thead,tbody可滑动(转载)

自动滚动例子:

http://www.jq22.com/webqd4276

转载自·威易网CSS教程:

效果:

代码:

<!DOCTYPE HTML>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>转载自·威易网CSS教程</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>
        </tbody>
    </table>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/jack_bob/article/details/106198392
今日推荐