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:\[code\]<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>\[/code\]So you can see I'm nesting \[code\]tbody\[/code\] within other \[code\]tbody\[/code\]s. This renders in Chrome fine. In fact it's how I want it to look.BUTWhen I inspect element, I see that Chrome (and Safari and Firefox) basically say "nuh uh" and break the nested \[code\]tbody\[/code\]s out. See here: Any ideas how to accomplish what I'm trying to get here?
