Nested table responsive alignment

Question

I have a parent table with three child tables. In the main table I want to display a row from the parent and a second row with nested tables from the three children and have all this be responsive.

My problem is the three nested tables align with columns from the main table and I cant figure out a way to decouple them from the main table columns as the screen size shrinks. I'd like the child tables to stack as the parent columns shrink down to fit in the width. Any ideas would be appreciated!

I'm using jquery and Bootstrap 3. I was going to use jsFiddle to show an example but it looks like I can embed it right here now! Just click on the run code button.

.parent {
    background-color: lightblue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<table>
    <thead>
        <tr class="parent">
            <th>parent col1</th>
            <th>parent col2</th>
            <th>parent col3</th>
            <th>parent col4</th>
        </tr>
    </thead>
    <tbody>
        <tr class="parent">
            <td>parent row1 data1</td>
            <td>parent row1 data2</td>
            <td>parent row1 data3</td>
            <td>parent row1 data4</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <table class="table table-responsive table-condensed">
                    <thead>
                        <tr>
                            <th>child1 col 1</th>
                            <th>child1 col 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>child1 row1 data 1</td>
                            <td>child1 row1 data 2</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table class="table table-responsive table-condensed">
                    <thead>
                        <tr>
                            <th>child2 col 1</th>
                            <th>child2 col 1</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>child2 row1 data 1</td>
                            <td>child2 row1 data 2</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table class="table table-responsive table-condensed">
                    <thead>
                        <tr>
                            <th>child3 col 1</th>
                            <th>child3 col 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>child3 row1 data1</td>
                            <td>child3 row1 data2</td>
                        </tr>
                        <tr>
                            <td>child3 row2 data1</td>
                            <td>child3 row2 data2</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr class="parent">
            <td>parent row2 data1</td>
            <td>parent row2 data2</td>
            <td>parent row2 data3</td>
            <td>parent row2 data4</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <table class="table table-responsive table-condensed">
                    <thead>
                        <tr>
                            <th>child1 col 1</th>
                            <th>child1 col 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>child1 row1 data 1</td>
                            <td>child1 row1 data 2</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table class="table table-responsive table-condensed">
                    <thead>
                        <tr>
                            <th>child2 col 1</th>
                            <th>child2 col 1</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>child1 row1 data 1</td>
                            <td>child1 row1 data 2</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table class="table table-responsive table-condensed">
                    <thead>
                        <tr>
                            <th>child3 col 1</th>
                            <th>child3 col 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>child3 row1 data1</td>
                            <td>child3 row1 data2</td>
                        </tr>
                        <tr>
                            <td>child3 row2 data1</td>
                            <td>child3 row2 data2</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr class="parent">
            <td>parent row3 data1</td>
            <td>parent row3 data2</td>
            <td>parent row3 data3</td>
            <td>parent row3 data4</td>
        </tr>
        <tr>
            <td></td>
            <td>
                <table class="table table-responsive table-condensed">
                    <thead>
                        <tr>
                            <th>child1 col 1</th>
                            <th>child1 col 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>child1 row1 data 1</td>
                            <td>child1 row1 data 2</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table class="table table-responsive table-condensed">
                    <thead>
                        <tr>
                            <th>child2 col 1</th>
                            <th>child2 col 1</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>child2 row1 data 1</td>
                            <td>child2 row1 data 2</td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table class="table table-responsive table-condensed">
                    <thead>
                        <tr>
                            <th>child3 col 1</th>
                            <th>child3 col 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>child3 row1 data1</td>
                            <td>child3 row1 data2</td>
                        </tr>
                        <tr>
                            <td>child3 row2 data1</td>
                            <td>child3 row2 data2</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

.table-responsive isn't valid on the <table> tag, you need to wrap a <div> around it with that class. Also, do you need to use nested tables? The parent fixed width table is likely the culprit. I'd suggest rethinking your layout to not use nested tables — Matt Lambert
You'll probably have to move away from <table> tables (as tables don't re-flow like other elements) and create some CSS tables or have your table scroll when viewed on smaller screen sized. — hungerstar
Matt, thanks for the heads up on .table-responsive needing it own div! — SteveO7

Talkingrock Talkingrock · Accepted Answer · 2014-10-29T03:13:01

Here are 2 ideas to try... For this JSFiddle, the main <td> tag in the row that contains the multiple tables has <td colspan="4">, so the td is 1 cell that expands across all 4 rows. Then the 3 tables are nested inside a table to help them be independent from the parent table and prevent a cell within a cell.

<tr>        
<td colspan="4">
<table>
<tr>

<td>    
... table 1 code ...
</td>

<td>
... table 2 code ...
</td>

<td>
... table 3 code ...
</td>

</tr>
</table>
</td>
</tr>

Here's a JSFiddle example where the 3 tables were placed inside a display:inline-block div so they would stack underneath each other on smaller screens.

<tr> 
<td colspan="4" class="child-holder">

<div>    
... table 1 code
</div>

div {
display:inline-block;
vertical-align:top;
}

Follow Up - In your original design, it looks like you may want the first column to be empty. If you want the nested divs to start at the second column just add an empty td tag, followed by the colspan="3" for each row that has nested divs. You can control how the divs stack using width, min or max width, or media queries...

<!-- row 3 -->    
<tr>
<td></td>    
<td colspan="3" class="child-holder">

<div>    
<table class="table table-responsive table-condensed">

Nested table responsive alignment

1 Answers