[英]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.