龚哥哥 - 山里男儿 爱生活、做自己!
table thead表头和列固定
发表于 2020-12-13 | 前端

Image

查看DEMO演示效果 https://gong.gg/my-test/table/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>table表头和列固定</title>
    <style>
        .container {
            width: 800px;
            height: 300px;
            overflow: scroll;
            border: 1px solid #ccc;
        }
        table {
            border-collapse: collapse;
        }
        table tbody tr:nth-child(odd) td {
            background-color: #f5f5f5;
        }
        table thead tr > th {
            position: sticky;
            top: 0;
            background: #ccc;
        }
        table tbody tr > td {
            border: 1px solid #eee;
            min-width: 100px;
        }
        table thead tr > th,
        table tbody tr > td {
            padding: 10px;
        }
        table thead tr > th:first-child,
        table thead tr > th:last-child {
            z-index: 1;
        }
        table thead tr > th:first-child,
        table tbody tr > td:first-child,
        table thead tr > th:last-child,
        table tbody tr > td:last-child {
            position: sticky;
            text-align: center;
        }
        table thead tr > th:first-child,
        table tbody tr > td:first-child {
            left: 0;
            -webkit-box-shadow: 1px 0px 1px #ddd;
            -moz-box-shadow: 1px 0px 1px #ddd;
            box-shadow: 1px 0px 1px #ddd;
            -webkit-box-shadow: 5px 0px 10px rgba(136, 136, 136, 0.3);
            -moz-box-shadow: 5px 0px 10px rgba(136, 136, 136, 0.3);
            box-shadow: 5px 0px 10px rgba(136, 136, 136, 0.3);
        }
        table thead tr > th:last-child,
        table tbody tr > td:last-child {
            right: 0;
            -webkit-box-shadow: 0px 0px 1px #ddd;
            -moz-box-shadow: 0px 0px 1px #ddd;
            box-shadow: 0px 0px 1px #ddd;
            -webkit-box-shadow: -5px 0px 10px rgba(136, 136, 136, 0.3);
            -moz-box-shadow: -5px 0px 10px rgba(136, 136, 136, 0.3);
            box-shadow: -5px 0px 10px rgba(136, 136, 136, 0.3);
        }
        table tbody tr > td:first-child,
        table tbody tr > td:last-child {
            background: #fff;
        }
    </style>
</head>
<body>
    <p>标题、第一列、最后一列固定、方便操作和数据对应表头</p>
    <p>下面提供了一个简单的演示、具体的实际效果可以查看 <a href="https://shopxo.net/" target="_blank">ShopXO</a> 系统中的应用</p>
    <div class="container">
        <table>
            <thead>
                <tr>
                    <th>title1</th>
                    <th>title2</th>
                    <th>title3</th>
                    <th>title4</th>
                    <th>title5</th>
                    <th>title6</th>
                    <th>title7</th>
                    <th>title8</th>
                    <th>title9</th>
                    <th>title10</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>data1-1</td>
                    <td>data1-2</td>
                    <td>data1-3</td>
                    <td>data1-4</td>
                    <td>data1-5</td>
                    <td>data1-6</td>
                    <td>data1-7</td>
                    <td>data1-8</td>
                    <td>data1-9</td>
                    <td>data1-10</td>
                </tr>
                <tr>
                    <td>data2-1</td>
                    <td>data2-2</td>
                    <td>data2-3</td>
                    <td>data2-4</td>
                    <td>data2-5</td>
                    <td>data2-6</td>
                    <td>data2-7</td>
                    <td>data2-8</td>
                    <td>data2-9</td>
                    <td>data2-10</td>
                </tr>
                <tr>
                    <td>data3-1</td>
                    <td>data3-2</td>
                    <td>data3-3</td>
                    <td>data3-4</td>
                    <td>data3-5</td>
                    <td>data3-6</td>
                    <td>data3-7</td>
                    <td>data3-8</td>
                    <td>data3-9</td>
                    <td>data3-10</td>
                </tr>
                <tr>
                    <td>data4-1</td>
                    <td>data4-2</td>
                    <td>data4-3</td>
                    <td>data4-4</td>
                    <td>data4-5</td>
                    <td>data4-6</td>
                    <td>data4-7</td>
                    <td>data4-8</td>
                    <td>data4-9</td>
                    <td>data4-10</td>
                </tr>
                <tr>
                    <td>data5-1</td>
                    <td>data5-2</td>
                    <td>data5-3</td>
                    <td>data5-4</td>
                    <td>data5-5</td>
                    <td>data5-6</td>
                    <td>data5-7</td>
                    <td>data5-8</td>
                    <td>data5-9</td>
                    <td>data5-10</td>
                </tr>
                <tr>
                    <td>data6-1</td>
                    <td>data6-2</td>
                    <td>data6-3</td>
                    <td>data6-4</td>
                    <td>data6-5</td>
                    <td>data6-6</td>
                    <td>data6-7</td>
                    <td>data6-8</td>
                    <td>data6-9</td>
                    <td>data6-10</td>
                </tr>
                <tr>
                    <td>data7-1</td>
                    <td>data7-2</td>
                    <td>data7-3</td>
                    <td>data7-4</td>
                    <td>data7-5</td>
                    <td>data7-6</td>
                    <td>data7-7</td>
                    <td>data7-8</td>
                    <td>data7-9</td>
                    <td>data7-10</td>
                </tr>
                <tr>
                    <td>data8-1</td>
                    <td>data8-2</td>
                    <td>data8-3</td>
                    <td>data8-4</td>
                    <td>data8-5</td>
                    <td>data8-6</td>
                    <td>data8-7</td>
                    <td>data8-8</td>
                    <td>data8-9</td>
                    <td>data8-10</td>
                </tr>
                <tr>
                    <td>data9-1</td>
                    <td>data9-2</td>
                    <td>data9-3</td>
                    <td>data9-4</td>
                    <td>data9-5</td>
                    <td>data9-6</td>
                    <td>data9-7</td>
                    <td>data9-8</td>
                    <td>data9-9</td>
                    <td>data9-10</td>
                </tr>
                <tr>
                    <td>data10-1</td>
                    <td>data10-2</td>
                    <td>data10-3</td>
                    <td>data10-4</td>
                    <td>data10-5</td>
                    <td>data10-6</td>
                    <td>data10-7</td>
                    <td>data10-8</td>
                    <td>data10-9</td>
                    <td>data10-10</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

评论:


2021-05-06 03:04
好久没更新技术文章了啊
Devil
2021-06-03 16:40
@戴:恩,最近在忙着开发 shopxo 系统

发表评论:

TOP