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内容包装在一个范围内，这样您就不会让它完全不可见，只有内容。

示例：

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

由于您只隐藏内容，因此您可以使用（也）显示：无。这样它就不会出现任何东西。

Answer 2

text-indent在你的情况下也适用：

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

http://jsfiddle.net/HWbDA/2/

Answer 3

尝试一下：

.table th.invisible-cell {
    font-size:0;
}

Answer 4

您可以尝试设置css属性visibility: hidden;，而不是使用display none。

可能：

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

Answer 5

通过删除cellpadding，间距和边框，使行不可见时，删除难看的白色间隙。

 <table cellpadding="0" cellspacing="0" border="0">

还要确保页面的边距和填充设置为0.这应该可以解决问题。

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

5 个答案: