Cannot properly format nested table with CSS

Question

Please look at this JSFiddle as reference.

Using tablesort and the accompanying css, I am trying to get the rows with first/last name to have alternating row colors. Also, I need the rows in the sub-table with date and time to have a white background.

I think part of my problem is that I also have a different class on the first td under the tablesort table. I need that class to kick off the trigger to toggle the hidden row... I just can't seem to get the CSS right.

Here is my HTML

<table class="tablesorter" id="table1">
<thead>
    <tr>
        <th>first name</th>
        <th>last name</th>
    </tr>
</thead>
<tbody>
    <tr class="parent-row">
        <td>John</td>
        <td>Appleseed</td>
    </tr>
    <tr class="parent-row-details expand-child" style="display:none">
        <td colspan="6">
            <table class="sub-table" id="SPID" border=1>
                <thead>
                    <th>Date</th>
                    <th>Time</th>
                </thead>
                <tbody>
                    <tr>
                        <td>12/1/13</td>
                        <td>4:00AM</td>
                    </tr>
                    <tr>
                        <td>12/1/14</td>
                        <td>7:00AM</td>
                    </tr>
                    <tr>
                        <td>12/1/15</td>
                        <td>6:00AM</td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr class="parent-row">
        <td>David</td>
        <td>Goliath</td>
    </tr>
    <tr class="parent-row-details expand-child" style="display:none">
        <td colspan="6">Detail about David</td>
    </tr>
    <tr class="parent-row">
        <td>Amie</td>
        <td>Winehouse</td>
    </tr>
    <tr class="parent-row-details expand-child" style="display:none">
        <td colspan="6">Detail About Amie</td>
    </tr>
</tbody>

And Here is the CSS

table.tablesorter {
font-family:arial;
background-color: #CDCDCD;
margin:10px 0pt 15px;
font-size: 8pt;
width: 100%;
text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #e6EEEE;
    border: 1px solid #FFF;
    font-size: 8pt;
    padding: 4px;
}
table.tablesorter thead tr .header {
    background: url(http://tablesorter.com/themes/blue/bg.gif) no-repeat 99%;
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
table.tablesorter tbody td {
    color: #3D3D3D;
    padding: 4px;
    background-color: #FFF;
    vertical-align: top;
}
table.tablesorter tbody tr.odd td {
    background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
    background: url(http://tablesorter.com/themes/blue/desc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown {
    background: url(http://tablesorter.com/themes/blue/asc.gif) no-repeat 99%;
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
    background-color: #8dbdd8;
}

table.tablesorter tr.parent-row td {
    background: #8dccc8;
}
table.tablesorter tr.parent-row-details td {
    background: grey;
}
table.sub-table thead tr th {
    background-color: #FFF;
    border: 1px solid #000;
    font-size: 8pt;
    padding: 4px;
}
table.sub-table tbody tr td {
    background-color: green;
    border: 1px solid #000;
    font-size: 8pt;
    padding: 4px;
}

John Boker · Accepted Answer · 2014-01-23 18:41:47Z

3

is this something like you wanted?

http://jsfiddle.net/johnboker/q7VL3/116/

added > td

$(document).ready(function () {
    $("table.tablesorter tr.parent-row:even > td").css("background-color", "blue");
});

also changed

table.sub-table tbody tr td {
    background-color: white; /* made this white */
    border: 1px solid #000;
    font-size: 8pt;
    padding: 4px;
}

answered Jan 23, 2014 at 18:41

John Boker

83.8k17 gold badges101 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

cellis Over a year ago

That is perfect!! Do you happen to have a url that explains what the "> td" is doing and why it is required? I have never seen that... Thank you so much!

John Boker Over a year ago

> td instructs it only to use the direct descendant td's. so, nothing below the first level of td's will be selected for the css style.

cellis Over a year ago

Good to know. Thanks. I have noticed one more issue. When you sort, the row colors move with the row so you can end up with two rows of the same color next to each other. I understand that I could use the nth-child option to make the color stick during sort, but when I put in it alternates the colors of the columns, not the rows. Any idea how to fix that?

Collectives™ on Stack Overflow

Cannot properly format nested table with CSS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related