时间戳

首页 > 解决方案 > 具有固定列表的固定标题不根据宽度响应

javascript - 具有固定列表的固定标题不根据宽度响应

问题描述

我制作了一个带有固定标题和列的表格。但是在这里我已经指定了我不想要的thead/tbody 的宽度。我将整个表放在一个带有引导类 col-md-6（50% 宽度）的 div 中。但除非我对thead 和 tbody 的样式进行硬编码，否则它不起作用。我希望 thead 和 tbody 采用父 div 的宽度。但是如果没有以像素或百分比指定，它会以某种方式占据屏幕的整个宽度。这是我的代码

 $(document).ready(function () {
            $('tbody').scroll(function (e) {

                $('tbody td:nth-child(1)').css("z-index", "1");
                $('tbody td:nth-child(2)').css("z-index", "1");

                $('thead').css("left", -$("tbody").scrollLeft());
                $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft());
                $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft());

                $('thead th:nth-child(2)').css("left", $("tbody").scrollLeft());
                $('tbody td:nth-child(2)').css("left", $("tbody").scrollLeft());
            });

        });
  /*setting for fixed columns*/
        table.trkFixTable tr td:nth-child(1), table.trkFixTable tr th:nth-child(1) {
            min-width: 150px;
        }

        table.trkFixTable tr td:nth-child(2), table.trkFixTable tr th:nth-child(2) {
            min-width: 150px;
        }

        table.trkFixTable thead th:nth-child(1), table.trkFixTable thead th:nth-child(2) {
            height: 80px;
            position: relative;
            z-index: 2;
        }

        table.trkFixTable tbody tr td:nth-child(1), table.trkFixTable tbody tr td:nth-child(2) {
            position: relative;
            height: 60px;
        }
        /*removing hover effect*/
        table.trkFixTable td:hover::after,
        table.trkFixTable th:hover::after {
            all: unset;
        }

        /*common styles*/
        table.trkFixTable {
            position: relative;
            overflow: hidden;
            /*width:100%;*/
            border-collapse: collapse;
        }

        table.trkFixTable thead {
            position: relative;
            display: block;
            width: 500px;
            overflow: visible;
        }

        table.trkFixTable thead th {
            min-width: 80px;
            height: 32px;
            background-color: #6afce2;
            text-align: center;
            border:1px solid black;
        }

        table.trkFixTable tbody {
            position: relative;
            display: block;
            width: 500px;
            overflow: scroll;
            height: 200px;
        }

        table.trkFixTable tbody td {
            min-width: 80px;
            border: 1px solid #222;
            background-color: #c1fff4;
            text-align: center;
        }
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 <script src="https://code.jquery.com/jquery-2.2.4.min.js"
            integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
            crossorigin="anonymous"></script>
    


    <div class="col-md-6">
        <table class="trkFixTable">
            <thead>
                <tr>
                    <th>First</th>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                    <th>7</th>
                    <th>8</th>
                    <th>9</th>
                    <th>10</th>
                    <th>11</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>First</td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                </tr>
                <tr>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                </tr>
                <tr>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                </tr>
                <tr>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                </tr>
                <tr>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                </tr>
                <tr>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                </tr>
                <tr>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                </tr>
                <tr>
                    <td>First</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                </tr>
                <tr>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                </tr>
                <tr>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                    <td>Robin</td>
                </tr>
            </tbody>
        </table>
    </div>

我想要的只是让表格响应不像静态 400px 或 50% 或类似的东西。请帮我一个

标签： javascriptjqueryhtmlcss

解决方案

有问题。这是因为我做了 thead 和 tbody 块。所以他们和父母分开了。现在我解决了从 tbody 和 thead 样式中删除 width 属性并获取父项的宽度然后使用 jQuery 为 thead 和 tbody 设置相同宽度的问题，如下所示：

var parentWidth = $('.fixedParent').width();
        $('thead').width(parentWidth);
        $('tbody').width(parentWidth);

推荐阅读