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

Question

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

例如。如果你搜索 "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 以处理比目前更多的代码。例如，您可以将 table 设置为 100% 宽度，并对搜索栏执行类似操作。然后你只是调整 TDs 的大小而不是其他一切。

无论如何，对于我所说的关于单元格的内容，这里是代码，假设您更新为 header_hidden 添加 class 的行以仅删除 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 以使它们靠得更近。问题是你最终得到了一个滚动条，因为宽度会超过 parent。在这种情况下避免这种情况的唯一方法是使用 overflow-x: 隐藏在 body 包装器上： http://jsfiddle.net/b42vn2nh/87/

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

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

P.S. 只需将宽度的 CSS 复制到 Fiddle 的 CSS 的底部，然后它应该适用。

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

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

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

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

Setting table column width in CSS (if necessary, JavaScript)

javascript

css

html-table