Hide thead but keep its cells width in tbody

Question

I always use Bootstrap grid classes in thead th tags so I'll no longer need repeating classes on tbody cells. for example:

<table>
    <thead>
        <tr>
            <th class="col-xs-2">#</th>
            <th class="col-xs-10">Title</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>150</td><td>Long text in here</td></tr>
        <tr><td>150</td><td>Long text in here</td></tr>
        <tr><td>150</td><td>Long text in here</td></tr>
        <tr><td>150</td><td>Long text in here</td></tr>
        <tr><td>150</td><td>Long text in here</td></tr>
    </tbody>
</table>

Now, I'm implementing a scenario that I should not use table headers. I tried display: none and visibility: hidden on thead but none of them works.

I guess I have following solutions (which are all bad INMHO!):

• Add grid classes to each tbody cell (which in my large dynamic table is a bad thing)
• Use css to target cells by the index eg: nth-child() which is also bad, because of duplicated CSS rules, and will be a pain in the ass becase table may dynamically change and I'll always need a SCSS compile!
• Give thead a 1px height, with no inner text or anything.

Is there a better solution?

Answer 1

Something like this should work:

thead p {
    margin: 0;
    opacity: 0;
    height: 0;
}

Of course the p is just an example, you can do this with any other tag.

Updated Fiddle: https://jsfiddle.net/8brbuy6v/1

Answer 2

Thanks to @Johann Kratzik suggestion, I managed to solve my own problem by hiding thead contents and using height: 0 on thead itself.

thead { opacity: 0; border: 0 none; height: 0; }
thead * { margin: 0; padding: 0; border: 0 none; height: 0px; }