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

text-indent works too in your case :

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

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

Answer 3

Try this:

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

Answer 4

you can try to set the css property visibility: hidden; instead of using display none.

possibly:

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

Answer 5

Remove your ugly white gap when making the row invisible by removing cellpadding, spacing and border.

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

Also make sure margins and padding for the page are set to 0. This should do the trick.