防止隐藏的 tr 破坏 td 宽度

Prevent a hidden tr from breaking the td widths

本文关键字：破坏 td 宽度 tr 隐藏      更新时间：2023-09-26

我正在折叠表行并使用jQuery来切换它们。但是，当显示隐藏行时，将重新计算前tr中td元素的宽度。这在我的示例中得到了展示：

$("tr:first").click(function(){
    $(this).next('tr').toggle();
});
tr{
    display: none;
}
tr:first-of-type{
    display: table-row;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
    <tr><td colspan="5">Hello</td><td colspan="3">World</td></tr>
    <tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
</table>

（如果喜欢，请小提琴：http://jsfiddle.net/8u070tkf/）

如何强制隐藏行的流动，但仍切换第二个tr的可见性？

你最好切换一个类并设置visibility CSS属性：

$("tr:first").click(function(){
    $(this).next('tr').toggleClass('shown');
});

.CSS：

tr:not(:first-of-type):not(.shown){
    visibility: hidden;
}

-演示-

不是真正的答案，但最终会有一些提示。

您可以colgroup和min-width中继，不幸的是，显示：无; 隐藏内容的宽度。

桌子的布局和桌子上的宽度也是值得关注的。

http://jsfiddle.net/8u070tkf/2/

$("tr:first").click(function(){
    $(this).next('tr').toggle();
});
tr{
    display: none;
}
tr:first-of-type{
    display: table-row;
}
col {
    min-width:2.2em;
}
td {
    background:yellow
}
<script src="http://code.jquery.com/jquery-compat-git.js"></script>
<table>
    <colgroup><col/><col/> <col/><col/><col/> <col/><col/> <col/></colgroup>
    <tr><td colspan="5">Hello</td><td colspan="3">World</td></tr>
    <tr><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td><td>foo</td></tr>
</table>

相关文章：