提问人：Melvyn 提问时间：10/25/2023 更新时间：10/25/2023 访问量：39
如何防止带有colspan的表格行在内容过长时弄乱其他列的自动大小
How to prevent table row with colspan from messing up the automatic size of other columns when its content is too long
问：
我有一个相对简单的 html 表格，其中的行可以单击以切换其下方行的显示（用于显示上面行的更多详细信息）。
单击时显示/隐藏的“详细信息”行设置了一个值，以便单个行跨越所有列。colspantd
该表始终占用 100% 的可用水平空间。
我面临着一个我不明白的问题：当“详细”行内容在多行上溢出时，它会触发所有列的宽度变化！
<html>
<head>
<title>asdf</title>
</head>
<body>
<table>
<thead>
<tr>
<th>AAA</th>
<th>BBB</th>
<th>CCC</th>
<th>DDD</th>
<th>EEE</th>
</tr>
</thead>
<tbody>
<tr onclick="document.getElementById('detail').hidden = !document.getElementById('detail').hidden" style="background-color:red">
<td>asdfa</td>
<td>dhfdh dfhd hfdfdh fdh dhdhd</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="detail">
<td colspan="5">
ssssssss ssssssssssss ssssssssssssssssssss ssssssssssss sssssssssssss ssssssssssssss ssssssssssssssss sssssssssssssssssssss ssssssssss ssssssssssssssssss sssssssssssssssssssss sssssssssssssss sssssssss ssssssssssssss sssssssssss ssssssssssssssssssssssss ssssssssss ssssss ssssssssssssssssssssssss sssssssssss ssssssssssss sssssssssssssss ssssssssssssssss sssssssssssssssss sssssssssssssssss ssssssss sssssssssssss sssssssssssss ssssssssssssssssssss sssssssssssssssssssssssss sssssssssssssssssss ssssssss ssssssssssss ssssssssss ssssssssssssss sssssssssssssssssssss ssssssssss ssssssssssssssss sssssssssssss sssssssssssssssssssss ssssssssssssssss sssssssssssssssss sssssssssss sssssssssssssss ssssssssssss
</td>
</tr>
<tr>
<td>asdfasdf</td>
<td>dgfhdh sdgdfdh</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
https://jsfiddle.net/93dpowb5/（单击红色行可切换“详细信息”行的显示）
我设法在jsfiddle中重现了这个问题。（在 Firefox 和 Chrome 上测试）
我注意到在“详细信息”行上设置可以解决问题（列宽保持不变），但我想避免这样做，以便可以正常调整窗口大小。max-width
我知道，但我希望我的列是动态调整大小的。我只希望在计算布局后它们保持相同的宽度！table-layout: fixed
基本上，我正在寻找一种尽可能非黑客的方式来动态调整所有内容的大小，同时避免在“详细信息”行显示时出现跳跃列......
答：
1赞
imhvost
10/25/2023
#1
隐藏在 ：divtr
body {
overflow: scroll; /* just prevent jump */
}
table {
width: 100%;
}
.hidden td {
padding-top: 0;
padding-bottom: 0;
}
.hidden div {
height: 0;
overflow: hidden;
}<table>
<thead>
<tr>
<th>AAA</th>
<th>BBB</th>
<th>CCC</th>
<th>DDD</th>
<th>EEE</th>
</tr>
</thead>
<tbody>
<tr onclick="detail.classList.toggle('hidden')" style="background-color:red">
<td>asdfa</td>
<td>dhfdh dfhd hfdfdh fdh dhdhd</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="detail">
<td colspan="5">
<div>ssssssss ssssssssssss ssssssssssssssssssss ssssssssssss sssssssssssss ssssssssssssss ssssssssssssssss sssssssssssssssssssss ssssssssss ssssssssssssssssss sssssssssssssssssssss sssssssssssssss sssssssss ssssssssssssss sssssssssss ssssssssssssssssssssssss ssssssssss ssssss ssssssssssssssssssssssss sssssssssss ssssssssssss sssssssssssssss ssssssssssssssss sssssssssssssssss sssssssssssssssss ssssssss sssssssssssss sssssssssssss ssssssssssssssssssss sssssssssssssssssssssssss sssssssssssssssssss ssssssss ssssssssssss ssssssssss ssssssssssssss sssssssssssssssssssss ssssssssss ssssssssssssssss sssssssssssss sssssssssssssssssssss ssssssssssssssss sssssssssssssssss sssssssssss sssssssssssssss ssssssssssss</div>
</td>
</tr>
<tr>
<td>asdfasdf</td>
<td>dgfhdh sdgdfdh</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>评论
1赞
Melvyn
10/25/2023
哦，所以诀窍实际上不是使用 ，而是通过将行的高度设置为 0 来隐藏行！谢谢！这感觉有点像黑客，但它有效。现在唯一要做的就是设法使行的高度实际上为 0。我不知道为什么，但似乎它总是希望至少 1px 高......还是比以前好，我想......编辑：啊，不，实际上这并不难！display: none.hidden { visibility: collapse; }
0赞
Melvyn
10/28/2023
啊，实际上它只有在可折叠行的内容永远不会改变时才有效，而在我的实际项目中，我的示例是基于的，内容是在行展开时动态生成的，所以它在那里不起作用 TT...我越来越确信，不可能保持列的初始动态大小，然后在内容发生更改时保持原样（即使使用包含所有单元格的 colspan，它不应该改变任何东西。也许这可以被认为是浏览器错误......td
评论