CODEWITHSUNDEEP
htmlcss
Callum Linington
Callum Linington

Reputation: 14417

HTML Table Alternating Row THBody Usage

I have several html tables in my content area of my page. The style is weird because it doesn't start the alternating row color fresh at the start of each table, it carries it on through out the list of tables.

<table>
    <tr>
       Blue
    </tr>
    <tr>
       White
    </tr>
    <tr>
       Blue
    </tr>
</table>

<table>
    <tr>
        White
    </tr>
    <tr>
        Blue
    </tr>
    <tr>
        White
    </tr>
</table>

The colour in the rows is a representation of what the css would set as the row background. But I want css to start the alternating again for the next table. So it would be:

<table>
    <tr>
       Blue
    </tr>
    <tr>
       White
    </tr>
    <tr>
       Blue
    </tr>
</table>

<table>
    <tr>
        Blue
    </tr>
    <tr>
        White
    </tr>
    <tr>
        Blue
    </tr>
</table>

Does THBODY have anything to do with it?

Thanks,

CSS Code

table { border-collapse:collapse; text-align:center; }

table th, td { border:1px solid #759EC7; padding:3px 7px 2px; }

th { color: #fff;
background-color: #5c87b2; text-align:center; }

tr:nth-child(odd) { background-color: #CEE1F5; }
tr:nth-child(even) { background-color: #fff; }

Update
It may be a bug that has crept in, I've look on the suggested fiddles and it works perfectly so it is just some buggy code somewhere.

Upvotes: 3

Views: 1203

Answers (4)

Callum Linington
Callum Linington

Reputation: 14417

The issue I was having was with two <TH> rows, which through off the alternating row colouring. So for example:

<tr>
    <th colpsan="2">Name</th>
</tr>
<tr>
    <th>First</th>
    <th>Last</th>
</tr>

This would have the Blue start on the Name row and then start alternating. So the first line of the table body would be Blue

<tr>
    <th>Name</th>
</tr>

This would have the Blue start on the Name row like before and then start alternating, However, the first line of the table body would be White

In these situations it would show a changing style which is not what I wanted to achieve. So all I did to fix this is:

<thead>
    <tr>
        <th colpsan="2">Name</th>
    </tr>
    <tr>
        <th>First</th>
        <th>Last</th>
    </tr>
</thead>
<tbody>
   <!-- Table Content in Here -->
</tbody>

And I then changed the style sheet to be:

tbody tr:nth-child(odd) {}
tbody tr:nth-child(even) {}

So basically I used the TBody and THead tags to make a more specific css style which is brilliant. More control, flexibility. So in my new example, you can have as many rows in the THead as you like, the content should always start on White, and to answer my question:

Does THead have anything to do with it?

Yes, it has EVERYTHING to do with it.

Upvotes: 0

Laurent S.
Laurent S.

Reputation: 6946

I think you're doing it using javascript, right ? Probably getting a collection of tr through jquery with $('tr') ? Try using CSS nth-child(odd) and nth-child(even) instead, most modern browsers won't have any problem with that.

Upvotes: 0

Martin Turjak
Martin Turjak

Reputation: 21214

The only problem you have is missing the tag in the table. It works perfectly if you add it. It shouldnt have anything to do with the tbody tag.

<table>
    <tr>
        <td>Blue</td>
    </tr>
    <tr>
        <td>White</td>
    </tr>
    <tr>
        <td>Blue</td>
    </tr>
</table>
<table>
    <tr>
        <td>Blue</td>
    </tr>
    <tr>
        <td>White</td>
    </tr>
    <tr>
        <td>Blue</td>
    </tr>
</table>

here is the fiddle: http://jsfiddle.net/rBwBm/

Upvotes: 2

hjpotter92
hjpotter92

Reputation: 80639

You can easily achieve it using combinations of :nth-child() by passing even and odd values. For eg. see this fiddle.

where, the CSS is

body {
    background-color: black;
    color: red;
}
table tr:nth-child(odd) {
    background-color: blue;
}
table tr:nth-child(even) {
    background-color: #ffffff;
}

Upvotes: 4

Related Questions