Question

好的，我已经在使用JavaScript更改了对齐列宽。但由于某些原因，它仍然不会排队。我希望每个td都有一个固定的宽度百分比，而thead也是如此。

EG。如果你搜索“cherry”，宽度会改变，但我希望它被修复。使用当前代码不应该一直是40px吗？

非常感谢。

<table id="table-body">
    <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>ad</th>
            <th>Tel</th>
            <th>Fax</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>12311</td>
            <td>Apple</td>
            <td>A1fgsdfgfhynfg</td>
            <td>1-11</td>
            <td>1-22</td>
        </tr>
        <tr>
            <td>12312</td>
            <td>Banana</td>
            <td>A2dfgdfgdfgdfg</td>
            <td>2-11</td>
            <td>2-22</td>
        </tr>
        <tr>
            <td>3Asdqwe</td>
            <td>Cherry</td>
            <td>A3</td>
            <td>3-11</td>
            <td>3-22</td>
        </tr>
        <tr>
            <td>12314</td>
            <td>Duriaen</td>
            <td>A456ghkfghk</td>
            <td>4-11</td>
            <td>4-22</td>
        </tr>
        <tr>
            <td>12315</td>
            <td>Apple</td>
            <td>A1uyjmghtd</td>
            <td>5-11</td>
            <td>5-22</td>
        </tr>
        <tr>
            <td>12316</td>
            <td>Banana</td>
            <td>A2yukmkfgmufc</td>
            <td>6-11</td>
            <td>6-22</td>
        </tr>
        <tr>
            <td style="width:70px;">3Asdqwe</td>
            <td>Cherry</td>
            <td>A3</td>
            <td>7-11</td>
            <td>7-22</td>
        </tr>
        <tr>
            <td>123117</td>
            <td>Duriaen</td>
            <td>A4nuftkｆ</td>
            <td>8-11</td>
            <td>8-22</td>
        </tr>
        <tr>
            <td>123118</td>
            <td>Duriaen</td>
            <td>A4</td>
            <td>8-11</td>
            <td>8-22</td>
        </tr>
        <tr>
            <td>123119</td>
            <td>Cherry</td>
            <td>Aoikdhpnko</td>
            <td>7-11</td>
            <td>7-22</td>
        </tr>
        <tr>
            <td>4A</td>
            <td>Duriaen</td>
            <td>A4ueowrqp</td>
            <td>8-11</td>
            <td>8-22</td>
        </tr>
        <tr>
            <td>12311</td>
            <td>Duriaen</td>
            <td>A4zcnnzcxt</td>
            <td>8-11</td>
            <td>8-22</td>
        </tr>
    </tbody>
</table>

CSS

#table-body, table.header tr> *:nth-child(1) {width:10px;}
#table-body, table.header tr> *:nth-child(2) {width:10px;}
#table-body, table.header tr> *:nth-child(3) {width:40px;}
#table-body, table.header tr> *:nth-child(4) {width:20px;}
#table-body, table.header tr> *:nth-child(5) {width:20px;}

Answer 1

您只需要调整TD的第一行，以便为所有TD设置宽度。我建议你克隆它后删除thead，因为你真的不需要它了，然后引用tbody的第一行并设置宽度。

您还可以清理代码中的一些内容并更新CSS以处理比当前更多的内容。例如，您可以将表格设置为100％宽度，并对搜索栏执行类似操作。然后你只是调整大小调整大小而不是其他所有东西。

无论如何，对于我所讨论的关于单元格的内容，这里是代码，假设您更新了为header_hidden添加类的行，只是删除了thead。这一切都在小提琴中：http://jsfiddle.net/b42vn2nh/83/

var tds = $('#table-body tr').first().children('td');
var ths = $('table.header th');
for (var i = 0;i< tds.length;i++) {
    tds.eq(i).css('width',ths.eq(i).width());
}

更新：我发现调整大小功能存在问题，导致宽度在调整页面大小时不断增长。这是因为使用设定的TD宽度进行计算。我更新了小提琴，以纠正：

这个单元格的单元格设置得更准确，当你缩小宽度时，它会使用溢出：隐藏在单元格上以使它们更加靠近。问题是你最终得到一个滚动条，因为宽度将超过父级。在这种情况下避免这种情况的唯一方法是在bodywrapper上隐藏overflow-x： http://jsfiddle.net/b42vn2nh/87/

由于上面那种情况，我调整了调整大小函数，以显示绑定到包装器限制的表体。它通过在设置标题宽度之前将主体的宽度切换为100％来实现。然后它将其设置回来。但是，在这种情况下，隐藏单元格溢出会失败，因为它仅适用于固定的表格布局和100％的宽度。您可以保留它并且不用担心真正小的调整大小，或者在单元格上使用word-break属性来强制包装。 http://jsfiddle.net/b42vn2nh/89/

主流浏览器的排队可能不是100％，但它非常接近。

P.S。只需将CSS的宽度复制到小提琴的CSS底部，它应该可以正常使用。

更新：好的，我看到了影响事物的搜索结果的含义。发生这种情况的原因是因为只有可见的单元格才会影响列的大小。因此，当搜索隐藏第一行单元格因为它们不匹配时，这些尺寸不再适用。

然而，标题也是如此。并且知道这一点，我们可以修改代码来清空TH元素而不是完全删除它们，然后我们可以设置TH的宽度而不是主体的第一行。为了防止空TH影响布局，我们使用CSS将其高度和填充设置为0.

更新后的小提琴：http://jsfiddle.net/b42vn2nh/91/

在CSS中设置表格列宽（如有必要，JavaScript）

1 个答案: