I think you're over complicating the solution. Given the screenshot you provided, no nesting is really required. Your engineers are wrong, you can style a table to look nested.
- Remove the nested tbodys, and use
tr
with a class associated to it's level. - Style each level according to it's depth. I target the first
td
in eachtd
to apply apadding-left
value to make it look nested.
Here is the Jsfiddle: http://jsfiddle.net/msV2U/
CSS:
body { font-family: arial; }
table { width: 100%; }
thead th { background-color: #f6f6f6; padding: 5px; }
table td { border: 1px solid #DDD; padding: 5px; }
tr.level1 td { font-weight: bold ;}
tr.level2 td:first-child,
tr.level3 td:first-child { padding-left: 25px; }
And the HTML:
<table class="zebra">
<thead>
<tr>
<th>Code</th>
<th>Procedure</th>
<th>Units</th>
<th>Charge</th>
<th>Avg. Charge</th>
<th>As %</th>
</tr>
</thead>
<tbody>
<tr class="level1">
<td colspan="6">
<i class="doctor"></i>John Dorian
</td>
</tr>
<tr class="level2">
<td colspan="6">
<i class="address"></i>Southern Hills Hospital
</td>
</tr>
<tr class="level3">
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
<tr class="level3">
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
<tr class="level3">
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
<tr class="level1">
<td colspan="6">
<i class="doctor"></i>John Dorian
</td>
</tr>
<tr class="level2">
<td colspan="6">
<i class="address"></i>Southern Hills Hospital
</td>
</tr>
<tr class="level3">
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
<tr class="level3">
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
<tr class="level3">
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
<tr class="level1">
<td colspan="6">
<i class="doctor"></i>John Dorian
</td>
</tr>
<tr class="level2">
<td colspan="6">
<i class="address"></i>Southern Hills Hospital
</td>
</tr>
<tr class="level3">
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
<tr class="level3">
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
<tr class="level3">
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
</tbody>
</table>