Hide thead but keep its cells width in tbody - html

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; }