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

Question

我有一个表格，我想将其设置为最初折叠，但单击侧面标题会展开相关部分。（解释不是我的强项，但我这里有一个小提琴，几乎可以满足我的要求）

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

这是相关代码（直接从小提琴中提取中提取）：

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在跨度中，这样您就不会使其完全不可见，而只是内容。

例子：

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

由于您仅隐藏内容，因此您可以使用（也）display:none。这样就不会显示任何东西了。