I'm trying to "nest" (not sure if that's the right word) some tables. I don't want a table in each cell, rather the ability to organize the table with appropriate headings. I'm told by my engineers that I can't simply style a table to "look" nested, rather it would be better if each header wrapped the children rows and cells.
Here's a screen shot of what it should look like:
Here is my HTML:
<section class="container">
<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 class="level1">
<tr>
<td colspan="6">
<i class="doctor"></i>John Dorian
</td>
</tr>
<tbody class="level2">
<tr>
<td colspan="6">
<i class="address"></i>Southern Hills Hospital
</td>
</tr>
<tbody class="level3">
<tr>
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
<tr>
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
<tr>
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
</tbody>
</tbody>
</tbody>
<tbody class="level1">
<tr>
<td colspan="6">
<i class="doctor"></i>John Dorian
</td>
</tr>
<tbody class="level2">
<tr>
<td colspan="6">
<i class="address"></i>Southern Hills Hospital
</td>
</tr>
<tbody class="level3">
<tr>
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
<tr>
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
<tr>
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
</tbody>
</tbody>
<tbody class="level2">
<tr>
<td colspan="6">
<i class="address"></i>Southern Hills Hospital
</td>
</tr>
<tbody class="level3">
<tr>
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
<tr>
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
<tr>
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
</tbody>
</tbody>
<tbody class="level2">
<tr>
<td colspan="6">
<i class="address"></i>Southern Hills Hospital
</td>
</tr>
<tbody class="level3">
<tr>
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
<tr>
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
<tr>
<td>99234</td>
<td>Chest XRay</td>
<td>1</td>
<td>20.00</td>
<td>40.00</td>
<td>10.00</td>
</tr>
</tbody>
</tbody>
</tbody>
</table>
So you can see I'm nesting tbody
within other tbody
s. This renders in Chrome fine. In fact it's how I want it to look.
BUT
When I inspect element, I see that Chrome (and Safari and Firefox) basically say "nuh uh" and break the nested tbody
s out. See here:
Any ideas how to accomplish what I'm trying to get here?