javascript - 隐藏表格单元格内容而不破坏间距

Question

我有一张表格，我想将其折叠起来，但单击侧标题会展开相关部分。 (解释不是我的强项，but I have a fiddle here that does almost what I want)

现在的主要问题是副标题在突出显示时仍然显示，这不是我想要的。我试过折叠 <th>的，但这会留下难看的白色间隙，即使我尝试给出第一个 <th>够大colspan .

这是相关代码(直接从 the fiddle 中提取):

HTML:

<div>
    <table class="table table-bordered table-condensed table-striped table-hover">
        <thead>
            <th colspan=4>Heading</th>
        </thead>
        <tbody>
            <tbody>
                <tr>
                    <th class="type-header" rowspan=3>Type 1</th>
                    <th class="invisible-cell">Name</th>
                    <th class="invisible-cell">Content</th>
                    <th class="invisible-cell">Data</th>
                </tr>
                <tr style="display:none">
                    <td>Some Name</td>
                    <td>Some Content</td>
                    <td>Some Data</td>
                </tr>
                <tr style="display:none">
                    <td>Another Name</td>
                    <td>More Content</td>
                    <td>More Data</td>
                </tr>
            </tbody>
            <tbody>
                <tr>
                    <th class="type-header" rowspan=3>Type 2</th>
                    <th class="invisible-cell">Name</th>
                    <th class="invisible-cell">Content</th>
                    <th class="invisible-cell">Data</th>
                </tr>
                <tr style="display:none">
                    <td>Some Name</td>
                    <td>Some Content</td>
                    <td>Some Data</td>
                </tr>
                <tr style="display:none">
                    <td>Another Name</td>
                    <td>More Content</td>
                    <td>More Data</td>
                </tr>
            </tbody>
        </tbody>
    </table>
</div>

JS:

$('.type-header').click(function () {
$(this).parent().nextUntil('type-header').toggle();
$(this).siblings().toggleClass("invisible-cell");
});

CSS:

.table th.invisible-cell {
    color: rgba(0, 0, 0, 0);
    border-left-color: rgba(0, 0, 0, 0);
}

有没有一种方法可以隐藏文本甚至不突出显示(不搞砸间距)？基本上，我希望文本作为占位符保留在那里，但无法检测到(除了检查 html 本身或其他东西，这很好)

Answer 1

您可以使用 visibility:hidden 并将第 th 内容包裹在一个 span 中，这样您就不会让它完全不可见，只是让内容不可见。

例子:

<th><span>The element with the hidden visibility</span></th>

因为您只隐藏了内容，您可以(也)使用 display:none。这样它就不会显示任何内容。