繁体   English   中英

在CSS中设置表格列的宽度(必要时使用JavaScript)

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

好的,在对齐列宽方面,我已经从使用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>A4nuftkf</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设置宽度。 我建议您在克隆thead之后将其删除,因为您真的不再需要它了,然后参考tbody的第一行并设置宽度。

您还可以清理代码中的某些内容,并更新CSS以处理比当前更多的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:hidden隐藏在单元格上,以使它们彼此靠近。 问题是您最终使用滚动条,因为宽度将超过父级。 避免这种情况的唯一方法是使用溢出-x:隐藏在bodywrapper上: http : //jsfiddle.net/b42vn2nh/87/

由于上述情况,我对调整大小功能进行了一些调整,以显示将表主体绑定到包装器范围。 它通过在设置标题宽度之前将主体的宽度切换为100%来实现。 然后将其重新设置。 但是,在这种情况下,隐藏单元溢出将失败,因为它仅适用于固定的表布局和100%的宽度。 您可以保留原状,而不必担心调整的大小,也可以在单元格上使用word-break属性来强制换行。 http://jsfiddle.net/b42vn2nh/89/

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

PS只需将CSS的宽度复制到Fiddle的CSS底部,即可正常使用。

更新:好的,我明白了影响事物的搜索结果的含义。 发生这种情况的原因是,只有可见的单元格才能影响列的大小。 因此,当搜索由于不匹配而隐藏第一行单元格时,大小将不再适用。

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM