在 CSS 中设置表列宽(如有必要，使用 JavaScript）

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

本文关键字：使用 JavaScript CSS 设置      更新时间：2023-09-26

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

例如。如果您搜索"樱桃"，宽度会改变，但我希望它被修复。当前代码不应该一直都是 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;}

您只需要调整第一行 TD 即可设置所有 TD 的宽度。我建议在克隆后删除头，因为您真的不再需要它了，然后引用正文的第一行并设置宽度。

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

无论如何，对于我所说的关于单元格的内容，这是代码，假设您更新为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宽度进行的。我更新了小提琴以更正：

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

由于上面的场景，我稍微调整了 resize 函数，以显示表体绑定到包装器范围。它通过在设置标题宽度之前将主体的宽度切换为 100% 来实现此目的。然后它将其放回原处。但是，在这种情况下隐藏单元格溢出会失败，因为它仅适用于固定的表格布局和 100% 的宽度。您可以保留它，而不用担心非常小的大小调整，或者使用单元格上的分词属性来强制换行。 http://jsfiddle.net/b42vn2nh/89/

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

附言只需将宽度的 CSS 复制到小提琴的 CSS 底部，它应该可以正常工作。

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

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

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

相关文章：