Issues with table nesting functionality

Question

Issues with table nesting functionality

I'm attempting to organize tables in a nested manner, instead of placing a table within each cell. My engineers have advised against simply styling the table to appear nested, and suggested that it would be more effective to wrap each header around the child rows and cells.

Shown below is an example of how the layout should look:

This 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>

As shown, I am nesting tbody elements within other tbody elements. This displays correctly in Chrome, but when inspecting elements in Chrome, Safari, and Firefox, they treat the nested tbody elements differently. See example here:

Any suggestions on achieving the desired outcome?

html css html-table nested

Answer 1

Answer №1

It appears that the solution presented is being overly complex. Based on the provided screenshot, nesting might not be necessary at all. In fact, styling a table to appear nested can still achieve the desired outcome, despite what your engineers may believe.

To simplify, eliminate the nested tbodys and instead use tr with corresponding classes denoting their level.
Apply styles to each level based on their depth. I suggest targeting the first td in each row to add a left padding and create a visual nesting effect.

Explore the Jsfiddle for a better visualization: http://jsfiddle.net/asdB4/

CSS:

body { font-family: Helvetica; }

table { width: 100%; }

thead th { background-color: #eaeaea; padding: 7px; }
table td { border: 1px solid #CCC; padding: 7px; }

tr.level1 td { font-weight: bold ;}
tr.level2 td:first-child,
tr.level3 td:first-child { padding-left: 30px; }

Sample HTML structure:

<table class="striped">
    <thead>
        <tr>
            <th>Category</th>
            <th>Item</th>
            <th>Quantity</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr class="level1">
            <td colspan="4">
                <i class="tag"></i>Electronics
            </td>
        </tr>
        <tr class="level2">
            <td colspan="4">
                <i class="subtag"></i>Smartphones
            </td>
        </tr>
        <tr class="level3">
            <td>101</td>
            <td>iPhone X</td>
            <td>1</td>
            <td>$999.00</td>
        </tr>
        <tr class="level3">
            <td>102</td>
            <td>Samsung Galaxy S21</td>
            <td>1</td>
            <td>$899.00</td>
        </tr>
        <tr class="level2">
            <td colspan="4">
                <i class="subtag"></i>Laptops
            </td>
        </tr>
        <tr class="level3">
            <td>201</td>
            <td>MacBook Pro</td>
            <td>1</td>
            <td>$1499.00</td>
        </tr>
        <tr class="level3">
            <td>202</td>
            <td>Dell XPS 15</td>
            <td>1</td>
            <td>$1299.00</td>
        </tr>
    </tbody>
</table>

Answer 2

It appears that the solution presented is being overly complex. Based on the provided screenshot, nesting might not be necessary at all. In fact, styling a table to appear nested can still achieve the desired outcome, despite what your engineers may believe.

To simplify, eliminate the nested tbodys and instead use tr with corresponding classes denoting their level.
Apply styles to each level based on their depth. I suggest targeting the first td in each row to add a left padding and create a visual nesting effect.

Explore the Jsfiddle for a better visualization: http://jsfiddle.net/asdB4/

CSS:

body { font-family: Helvetica; }

table { width: 100%; }

thead th { background-color: #eaeaea; padding: 7px; }
table td { border: 1px solid #CCC; padding: 7px; }

tr.level1 td { font-weight: bold ;}
tr.level2 td:first-child,
tr.level3 td:first-child { padding-left: 30px; }

Sample HTML structure:

<table class="striped">
    <thead>
        <tr>
            <th>Category</th>
            <th>Item</th>
            <th>Quantity</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr class="level1">
            <td colspan="4">
                <i class="tag"></i>Electronics
            </td>
        </tr>
        <tr class="level2">
            <td colspan="4">
                <i class="subtag"></i>Smartphones
            </td>
        </tr>
        <tr class="level3">
            <td>101</td>
            <td>iPhone X</td>
            <td>1</td>
            <td>$999.00</td>
        </tr>
        <tr class="level3">
            <td>102</td>
            <td>Samsung Galaxy S21</td>
            <td>1</td>
            <td>$899.00</td>
        </tr>
        <tr class="level2">
            <td colspan="4">
                <i class="subtag"></i>Laptops
            </td>
        </tr>
        <tr class="level3">
            <td>201</td>
            <td>MacBook Pro</td>
            <td>1</td>
            <td>$1499.00</td>
        </tr>
        <tr class="level3">
            <td>202</td>
            <td>Dell XPS 15</td>
            <td>1</td>
            <td>$1299.00</td>
        </tr>
    </tbody>
</table>

Answer 3

Answer №2

Recent developments have rendered this question irrelevant. Appreciate the update.

Answer 4

Recent developments have rendered this question irrelevant. Appreciate the update.

Issues with table nesting functionality

Answer №1

Answer №2

Similar questions

A div element with a z-index of 9 remaining below another element with a z-index of 1

What's the best way to make div columns appear closer together when floating?

Strip the CSS styling from an image (the CSS being included in the generated code)

Is there a way to transfer multiple functions using a single context?

Tips for placing a searchbox on top of a carousel?

Retrieve the selected date from the date picker widget

Keep the text centered, even if it's larger than the container

What are the methods for adjusting the height of one div in relation to another div?

Modifying the weight of fonts in TVML components

`Javascript framework suggests ajax navigation as the preferred method`

The discrepancy between the heights of a div using Jquery and JavaScript

Adjusting the layout of tables for an accordion design

Is there a way to display the contents of a zipped file using an HTML IFrame?

Tips on inserting text into form input fields

text/x-handlebars always missing in action

Pictures may become distorted when their width is smaller than the container

Tips on managing JavaScript pop-up windows with Selenium and Java

Sweetalert not functioning properly when deleting records from Datatable

Implementing the IF statement in jQuery

What is the best way to ensure that a Flex div and its child images stay confined within the boundaries of its parent container?