Bootstrap nested inner table with colspan - html

Question

For this Bootstrap styled table, I want the three columns (Sub1, Sub2, Sub3) widths to grow and align with their corresponding columns in the nested table.
http://jsfiddle.net/jamesholcomb/r55Zc/

Answer 1

Instead of using a nested <table>, simply use the rowspan attribute on the first column. Borders (and some padding) can be removed with some creative CSS (example):
CSS
th { text-align: center; }
tbody td {
border-width: 0 !important;
padding-top:0 !important;
}
tbody tr th ~ td {
border-top-width: 1px !important;
padding-top:8px !important;
}
tbody tr td:first-of-type {
border-left-width: 1px !important;
}
HTML
<div class="row">
<div class="span*">
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="3">Col1</th>
</tr>
<tr>
<th></th>
<th>Sub1</th>
<th>Sub2</th>
<th>Sub3</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">Row1</th>
<td>[-01234543333545]</td>
<td>[4567]</td>
<td>[1]</td>
</tr>
<tr>
<td>[1]</td>
<td>[456.789]</td>
<td>[2]</td>
</tr>
<tr>
<td>[0]</td>
<td>[1]</td>
<td>[0000789.0123]</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 2

If you want the entire row to highlight correctly, I suggest you tweak your table as others have suggested. However, instead of creating multiple trs and giving the td a rowspan of 3 (which causes row highlighting problems), just list the data in the td as an unordered list and make some adjustments to the css.
Table:
<div class="row">
<div class="span*">
<table class="table table-bordered">
<thead>
<tr>
<th></th>
<th colspan="3">Col1</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Sub1</td>
<td>Sub2</td>
<td>Sub3</td>
</tr>
<tr>
<td>Row1</td>
<td><ul><li>[-01234543333545]</li><li>[1]</li><li>[0]</li></ul></td>
<td><ul><li>[4567]</li><li>[456.789]</li><li>[1]</li></ul></td>
<td><ul><li>[1]</li><li>[2]</li><li>[0000789.0123]</li></ul></td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
td > ul {
list-style-type:none;
margin:0;
}
Here is the updated fiddle forked from #Mr.Alien's suggestions.