当前位置: 首页 >>JAVASCRIPT >>JS实战技巧 >>HDHCMS使用CSS3配合JS固定TABLE的标题及首、尾列指定列

HDHCMS使用CSS3配合JS固定TABLE的标题及首、尾列指定列

时间:2020/7/3 3:17:00 【admin】

HDHCMS使用CSS3配合JS固定TABLE的标题及首、尾列指定列…

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>HDHCMS使用CSS3配合JS固定TABLE的标题及首、尾列指定列</title>

</head>

<body>

        <div id="HdhCmsTable">

            <table>

                <thead>

                    <tr>

                        <th>HdhCms1</th>

                        <th>HdhCms2</th>

                        <th>HdhCms3</th>

                        <th>HdhCms4</th>

                        <th>HdhCms5</th>

                        <th>HdhCms6</th>

                        <th>HdhCms7</th>

                        <th>HdhCms8</th>

                        <th>HdhCms9</th>

                    </tr>

                </thead>

                <tbody>

                    <tr>

                        <td>aaa1</td>

                        <td>bbb</td>

                        <td>ccc</td>

                        <td>ddd</td>

                        <td>eee</td>

                        <td>2020/7/3 8:24:30</td>

                        <td>192.168.168.134</td>

                        <td>用户:sss[ddd]登录系统。</td>

                        <td><a href="#">【查看】</a></td>

                    </tr>

                    <tr>

                        <td>aaa1</td>

                        <td>bbb</td>

                        <td>ccc</td>

                        <td>ddd</td>

                        <td>eee</td>

                        <td>2020/7/3 8:24:30</td>

                        <td>192.168.168.134</td>

                        <td>用户:sss[ddd]登录系统。</td>

                        <td><a href="#">【查看】</a></td>

                    </tr>

                    <tr>

                        <td>aaa1</td>

                        <td>bbb</td>

                        <td>ccc</td>

                        <td>ddd</td>

                        <td>eee</td>

                        <td>2020/7/3 8:24:30</td>

                        <td>192.168.168.134</td>

                        <td>用户:sss[ddd]登录系统。</td>

                        <td><a href="#">【查看】</a></td>

                    </tr>

                    <tr>

                        <td>aaa1</td>

                        <td>bbb</td>

                        <td>ccc</td>

                        <td>ddd</td>

                        <td>eee</td>

                        <td>2020/7/3 8:24:30</td>

                        <td>192.168.168.134</td>

                        <td>用户:sss[ddd]登录系统。</td>

                        <td><a href="#">【查看】</a></td>

                    </tr>

                    <tr>

                        <td>aaa1</td>

                        <td>bbb</td>

                        <td>ccc</td>

                        <td>ddd</td>

                        <td>eee</td>

                        <td>2020/7/3 8:24:30</td>

                        <td>192.168.168.134</td>

                        <td>用户:sss[ddd]登录系统。</td>

                        <td><a href="#">【查看】</a></td>

                    </tr>

                    <tr>

                        <td>aaa1</td>

                        <td>bbb</td>

                        <td>ccc</td>

                        <td>ddd</td>

                        <td>eee</td>

                        <td>2020/7/3 8:24:30</td>

                        <td>192.168.168.134</td>

                        <td>用户:sss[ddd]登录系统。</td>

                        <td><a href="#">【查看】</a></td>

                    </tr>

                    <tr>

                        <td>aaa1</td>

                        <td>bbb</td>

                        <td>ccc</td>

                        <td>ddd</td>

                        <td>eee</td>

                        <td>2020/7/3 8:24:30</td>

                        <td>192.168.168.134</td>

                        <td>用户:sss[ddd]登录系统。</td>

                        <td><a href="#">【查看】</a></td>

                    </tr>

                    <tr>

                        <td>aaa1</td>

                        <td>bbb</td>

                        <td>ccc</td>

                        <td>ddd</td>

                        <td>eee</td>

                        <td>2020/7/3 8:24:30</td>

                        <td>192.168.168.134</td>

                        <td>用户:sss[ddd]登录系统。</td>

                        <td><a href="#">【查看】</a></td>

                    </tr>

                    <tr>

                        <td>aaa1</td>

                        <td>bbb</td>

                        <td>ccc</td>

                        <td>ddd</td>

                        <td>eee</td>

                        <td>2020/7/3 8:24:30</td>

                        <td>192.168.168.134</td>

                        <td>用户:sss[ddd]登录系统。</td>

                        <td><a href="#">【查看】</a></td>

                    </tr>

                    <tr>

                        <td>aaa1</td>

                        <td>bbb</td>

                        <td>ccc</td>

                        <td>ddd</td>

                        <td>eee</td>

                        <td>2020/7/3 8:24:30</td>

                        <td>192.168.168.134</td>

                        <td>用户:sss[ddd]登录系统。</td>

                        <td><a href="#">【查看】</a></td>

                    </tr>

                </tbody>

            </table>

        </div>

    <style>

        table {

            table-layout: fixed; /*使用fixed实现th固定宽度*/

            width: 100%; /*在使用fixed的时候,必须指定width,否则还是自适应宽度*/

            border-collapse: separate; /*头和列固定必须得用这个,否则滚动时,th和td的border就不见了*/

            border-spacing: 0;

            text-align: center;

            transform-style: preserve-3d;

        }

            table thead {

                background-color: #f6fafd;

            }

                table thead th {

                    border-top: 3px solid #007cff;

                    background-color: #f6fafd;

                }

            table th {

                font-family: 'Microsoft YaHei';

                font-size: 14px;

                color: #333333;

                margin-top: 8px;

                line-height: 40px;

                width: 160px;

            }

        th, td {

            background: #fff;

            font-size: 12px;

        }


        table th:nth-child(1) {

            width: 80px;

        }


        table th:nth-child(2) {

            width: 150px;

        }


        table th:nth-child(3) {

            width: 200px;

        }


        table th:nth-child(4) {

            width: 80px;

        }


        table th:nth-child(5) {

            width: 80px;

        }


        table th:nth-child(6) {

            width: 150px;

        }


        table th:nth-child(7) {

            width: 150px;

        }


        table th:nth-child(8) {

            width: 250px;

            padding-right: 1rem;

        }


        table th:nth-child(9) {

            width: 200px;

        }


        #HdhCmsTable {

            width: 100%;

            height: 100px;

            overflow: auto;

            margin: 0 auto;

            min-width: 800px;

        }

        /*--------------------------------------------------------*/

    </style>

    <script type="text/javascript">

        window.onload = function () {

            //这是外层div

            var HdhCmsTable = document.querySelector("#HdhCmsTable");

            //这是水平可滚动距离

            var diff = HdhCmsTable.scrollWidth - HdhCmsTable.clientWidth;

            //获取最后一列单元格,在这个例子里,最后一列是第9列

            var opts = HdhCmsTable.querySelectorAll("tr td:nth-child(9),tr th:nth-child(9)");

            //获取前两列单元格

            var names = HdhCmsTable.querySelectorAll("tr td:nth-child(1),tr th:nth-child(1),tr td:nth-child(2),tr th:nth-child(2)");

            //如果水平有滚动条,那一开始就需要让最后一列偏移

            if (diff > 0) {

                for (var i = 0; i < opts.length; i++) {

                    opts[i].style.transform = "translateX(-" + diff + "px)";

                }

            }

            /*******固定的逻辑基本就下面这些*********/

            var scroll_x = 0;

            var scroll_y = 0;

            HdhCmsTable.addEventListener("scroll", function (e) {

                //垂直滚动固定头

                if (this.scrollTop != scroll_y) {

                    scroll_y = this.scrollTop;

                    this.querySelector("thead").style.transform = "translate3d(0," + this.scrollTop + "px,.1px)";

                }

                //水平滚动固定前两列和最后一列

                if (this.scrollLeft != scroll_x) {

                    scroll_x = this.scrollLeft;

                    for (var i = 0; i < opts.length; i++) {

                        opts[i].style.transform = "translateX(-" + (diff - scroll_x) + "px)";

                    }

                    for (var i = 0; i < names.length ; i++) {

                        names[i].style.transform = "translateX(" + scroll_x + "px)";

                    }

                }

            })

        }

    </script>

    </script>

</body>

</html>


相关文章

CopyRight:2007-2018 语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com

分享按钮