javascript - 在 CSS 中设置表格列宽(如有必要，JavaScript)

Question

好的，我已经从使用 JavaScript 更改为使用 CSS 来对齐列宽。但由于某些原因，它仍然不会排队。我希望每个 td 都具有固定的宽度百分比，而 thead 也具有相同的宽度。

例如。如果你搜索“cherry”，宽度会改变，但我希望它是固定的。当前代码不应该一直是 40px 吗？

fiddle

非常感谢。

<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% 宽度，并对搜索栏执行类似操作。然后你只是调整 TDs 的大小而不是其他一切。

无论如何，对于我所说的关于单元格的内容，这里是代码，假设您更新为 header_hidden 添加类的行以仅删除 thead。一切都在 fiddle 中: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 宽度进行计算。我更新了 Fiddle 以更正该问题:

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

由于上述情况，我稍微调整了调整大小功能以显示绑定(bind)到包装器范围的表体。它通过在设置标题宽度之前将正文宽度切换为 100% 来实现这一点。然后将其设置回去。但是，在这种情况下隐藏单元格溢出失败了，因为它只适用于固定的表格布局和 100% 的宽度。您可以保留它而不用担心非常小的调整大小，或者使用单元格上的分词属性强制换行。 http://jsfiddle.net/b42vn2nh/89/

在主要浏览器中排列可能不是 100%，但非常接近。

附注只需将宽度的 CSS 复制到 Fiddle 的 CSS 底部，它应该可以正常应用。

更新:好的，我明白您所说的影响事物的搜索结果的意思了。发生这种情况的原因是因为只有可见单元格才能影响列的大小。因此，当搜索隐藏第一行单元格(因为它们不匹配)时，尺寸将不再适用。

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

更新后的 Fiddle:http://jsfiddle.net/b42vn2nh/91/