Question

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

$("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的可见性？

Answer 1

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

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

CSS：

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

-DEMO-

Answer 2

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

你可以转发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>

防止隐藏的tr破坏td宽度

2 个答案:

-DEMO-