问题：

固定表头与固定列表不响应宽度

司徒锐进

2023-03-14

我做了一个表头和列固定的表。但这里我已经指定了我不想要的头/体的宽度。我用引导类col-md-6(50%宽度）将整个表放在一个div中。但是除非我为thead和tbody硬编码样式，否则它是不起作用的。我希望thead和tbody取父div的宽度。但如果没有指定像素或百分比,则会占用屏幕的全宽。这是我的代码

null

 $(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>

null

所有我想要的是使表的响应，而不是像静态400px或50%或类似的东西。请帮我一个

共有1个答案

通鸿风

2023-03-14

有问题了。那是因为我做了头和体块。所以他们和父母分开了。现在我解决了从tbody和thead样式中删除width属性并获得parent的width,然后使用jQuery将相同的width设置为thead和tbody的问题,如下所示：

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

类似资料：

固定表单元格宽度

问题内容：许多人仍然使用表格来布局控件，数据等。-流行的jqGrid就是一个例子。但是，发生了一些我似乎无法理解的魔术（它的桌子大声喊叫，可能会有多少魔术？）如何设置表的列宽并使它像jqGrid那样遵守！？如果我尝试复制此内容，即使我设置了every ，只要这些单元格之一的内容大于20px，该单元格就会展开！有什么想法或见解吗？问题答案：您可以尝试对所有行使用标签管理表样式，但是您需要在
响应式表格之固定表头的简单实现

本文向大家介绍响应式表格之固定表头的简单实现，包括了响应式表格之固定表头的简单实现的使用技巧和注意事项，需要的朋友参考一下数据展示时，表头的固定，可以有更好的可读性。一、实现方式： 1、定义2个表格，一个absolute固定 2、表1<th>复制，并插入表2 3、resize()方法，实时获取表1各列<th>宽度 4、页面过小时，表格滚动带表头滚动二、注意细节： 1、宽度自适应、去除单元格间
固定表格单元格宽度

问题内容：许多人仍然使用表格来布局控件，数据等。-流行的jqGrid就是一个例子。但是，发生了一些我似乎无法理解的魔术（它的桌子大声喊叫，可能有多少魔术？）如何设置表的列宽并使它像jqGrid那样遵守！？如果我尝试复制此内容，即使我设置了every ，只要这些单元格之一的内容大于20px，该单元格就会展开！有什么想法或见解吗？问题答案：您可以尝试对所有行使用标签管理表样式，但是您需要在或
首列固定的列表

实现特殊的表格（UITableView）效果：即表格中的首列固定不动，而每一行除了首列均可左右拖动，以展现每一行更多内容。作者谭林江（@无法越狱的痛）说：去益盟面试回来，感觉聊得有点郁闷，没有展示出自己的示例，其中面试者就拿了他们的软件过来让我分析一下是怎么做的，当时脑壳有点晕，没反应过来。出来后一直感觉不爽，于是回来花了2个小时时间，把他们这个东西搞了出来。大体描述如下：整体看上去是个ta
具有固定第一列的bootstrap 3响应表

问题内容：我专门针对移动设备，因此我有一个Bootstrap响应表。它只是一个带有引导类“表响应”的div和一个嵌套在表中的类，该类与“表表条纹表边界表悬停表压缩表”类嵌套在一起。有什么简单的方法可以确保第一列是固定的（不是水平滚动）？在移动设备上，每次可能都有滚动，但第一列实际上包含表标题。问题答案：如果您仅针对移动设备，那么这可能对您有用：您可以克隆表中的第一列并应用，以便在滚动表的其
固定宽度的JScrollPane

问题内容：我是Java Swing的新手，对下一个代码感到困惑。我的目标是制作带有 2个JTextPane的垂直可滚动面板。具有父面板固定宽度70％的第一个JTextPane和具有固定宽度30％的第二个JTextPane。因为这两个JTextPane具有固定的宽度，所以它们只能在垂直方向上扩展更多文本。我使用此解决方案，因为我只想为此2个JTextPane使用一个滚动条。我的初始化代码

固定表头与固定列表不响应宽度

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档