在CSS中设置表列宽度(如有必要，请使用JavaScript)
好的，我已经从使用JavaScript到CSS在对齐列宽度。但出于某些原因，它仍然不会排好队。我要每个td在一个固定的宽度百分比，和头与同样的。
例如：如果你搜索“樱桃”宽度会改变，但我希望它是固定的。对于当前的代码，它不是一直都是40 be吗？
小提琴
非常感谢。
<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;}回答 1
Stack Overflow用户
发布于 2015-03-10 01:56:33
您只需要调整第一行TDs，就可以设置所有TDs的宽度。我建议在克隆它之后删除它，因为您真的不再需要它了，然后引用tbody的第一行并设置宽度。
您还可以清理代码中的一些内容，并更新CSS以处理比当前更多的CSS。例如，您可以将表设置为100%宽度，并对搜索栏执行类似操作。然后，您只是调整TDs的大小，而不是其他所有的东西。
无论如何，对于我所说的关于单元格的内容，下面是代码，假设您更新了为header_hidden添加类的行，以删除头。一切都在小提琴里：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以更正如下：
这个单元格更精确地设置为相同的大小，当您缩小宽度非常小时，它使用溢出:隐藏在单元格上，使它们更接近。问题是，由于宽度将超过父文件，因此最终会出现滚动条。在本例中，避免这种情况的唯一方法是在包装器：http://jsfiddle.net/b42vn2nh/87/上隐藏溢出-x：。
由于上面的场景，我稍微调整了调整大小的函数，以显示表主体被绑定到包装器的限制。它通过在设置标头宽度之前将身体的宽度切换到100%来实现这一点。然后把它放回原处。但是，隐藏单元格溢出在这种情况下会失败，因为它只适用于固定的表布局和宽度为100%的表。您可以不使用它，而不必担心很小的调整大小，或者使用单元格上的单词打断属性来强制包装。http://jsfiddle.net/b42vn2nh/89/
各大浏览器之间的排成一行可能不是100%，但它是相当接近的。
P.S.只需将宽度的CSS复制到Fiddle的CSS底部，就可以很好地应用。
更新：好吧，我明白你所说的搜索结果对事情有什么影响。发生这种情况的原因是，只有可见单元格才能影响列的大小大小。因此，当搜索隐藏第一行单元格时，由于它们不匹配，大小不再适用。
但是，标题也是如此。知道了这一点，我们可以修改代码来清空TH元素，而不是完全删除它们，然后我们可以设置TH上的宽度，而不是主体的第一行。为了防止空项影响布局，我们使用CSS将其高度和填充设置为0。
更新的Fiddle：http://jsfiddle.net/b42vn2nh/91/
https://stackoverflow.com/questions/28954331
复制相似问题
腾讯云开发者
