Question

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:

enter image description here

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 tbodys. 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 tbodys out. See here:

Any ideas how to accomplish what I'm trying to get here?

enter image description here

No correct solution

OTHER TIPS

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.

  1. Remove the nested tbodys, and use tr with a class associated to it's level.
  2. Style each level according to it's depth. I target the first td in each td to apply a padding-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>

New info came to light and this question no longer applies. Thanks.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top