Hide table cell content without ruining spacing

Question

I've got a table, and I want to make it so that it is initially collapsed, but clicking on a side heading expands the relevant section. (Explanations aren't my forte, but I have a fiddle here that does almost what I want)

The main issue now is that the subheadings still show up when highlighted, which isn't what I want. I've tried collapsing the <th>'s, but that leaves an ugly white gap, even when I try giving the first <th> a large enough colspan.

Here's the relevant code (pulled straight from 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);
}

Is there a way I can hide the text even from highlighting (without screwing up the spacing)? Basically, I want the text to remain there as a placeholder, but be undetectable (short of examining the html itself or something, that's fine)

Answer 1

You can use visibility:hidden and wrap the th content in a span, so you do not make it totally invisible, just the content.

Example:

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

Since you are hidding only the content, you can use (also) display:none. That way it wont show up anything.

Answer 2

Try this:

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