纯css的表头固定的滚动表格

下载地址：https://github.com/ybx13579/table-scroll-thead-fixed/tree/master
1、效果图预览：
这里写图片描述
2、复制以下代码可直接查看或下载 ↑ ↑ ↑
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>纯css 表头固定的滚动表格</title>
    <meta charset="utf-8" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .scroll_table_ot {
            margin: 100px auto;
            line-height: 18px;
            width: 440px;
            font-size: 14px;
        }

            .scroll_table_ot .scroll {
                max-height: 370px;
                border: 1px solid #6a6a6a;
                border-top: 0;
                overflow-y: auto;
                border-right: 0;
            }

            .scroll_table_ot table {
                width: 100%;
                table-layout: fixed;
                border-collapse: collapse;
                border-spacing: 0;
            }

            .scroll_table_ot th, .scroll_table_ot td {
                width: 120px;
                padding: 10px;
                border: 1px solid #6a6a6a;
            }

            .scroll_table_ot th {
                font-weight: bold;
            }

            .scroll_table_ot thead th:last-child, .scroll_table_ot tbody td:last-child {
                width: auto;
            }

            .scroll_table_ot tbody tr:first-child td {
                border-top: 0;
            }

            .scroll_table_ot tbody tr:last-child td {
                border-bottom: 0;
            }

            .scroll_table_ot tbody tr td:first-child {
                border-left: 0;
            }

            .scroll_table_ot tbody tr td:last-child {
                border-right: 0;
            }
    </style>
</head>
<body>
    <div class="scroll_table_ot">
        <table>
            <thead>
                <tr><th>编号</th><th>版本</th><th>更新日期</th></tr>
            </thead>
        </table>
        <div class="scroll scrollbarStyle">
            <table>
                <tbody>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                    <tr><td>1</td><td>v2.2</td><td>2017-9-7</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
纯css的 表头固定的滚动表格

纯css的 表头固定的滚动表格

猜你喜欢

纯css的表头固定的滚动表格

纯css的表头固定的滚动表格
