Alternating Row Colors

Permalink 2 users found helpful
I am wanting to have my table rows have alternating colors for the background. This is the CSS I have.
<style>
#table
{
font-family:"Trebuchet MS", Georgia, Helvetica, sans-serif;
width:100%;
border-collapse:collapse;
}
#table td, #table th
{
font-size:1em;
border:1px solid #005CE6;
padding:3px 7px 2px 7px;
}
#table th 
{

Since I am using the jQuery TableSorter, when ever I sort the table, the row colors also change. Help!

Blenderite
View Replies: View Best Answer
JohntheFish replied on at Permalink Reply
JohntheFish
Rather than set the styles for alternate rows with jquery, you can do it with pure css. That way, when the table is sorted, the stripes stay zebra rather than follow the original rows.

For some ideas, have a look at the bootstrap css for zebra striped tables.

http://twitter.github.io/bootstrap/base-css.html#tables...
Blenderite replied on at Permalink Reply
Blenderite
This is what I came up with:http://jsfiddle.net/Pw46A/2/ It doesn't work. Any ideas?
JohntheFish replied on at Permalink Best Answer Reply
JohntheFish
Blenderite replied on at Permalink Reply
Blenderite
The table on my site has a jquery Tablesort incorporated. Unfortunately, when I sort the table, the striping doesn't stay like it should, but moves around when sorted.
JohntheFish replied on at Permalink Reply
JohntheFish
You probably still have the .alt css rule:
#table tr.alt td {
    color:#000000;
    background-color:#EBF5FF;
}

That rule is being set by javascript or php somewhere and not re-set on sort.

First, delete that css code, it isn't needed with the pure css solution (I just tacked my css on the end in the fiddle and didn't bother to clear up anything else).

Second, find where the .alt class is being set, either directly in the js somewhere or where a js library is being called, or maybe in the php that outputs the table, and change the code so the .alt class is not set at all.
Blenderite replied on at Permalink Reply
Blenderite
Duh! Completely overlooked that! Thanks!
Blenderite replied on at Permalink Reply
Blenderite
I added a search feature to the table and now the alternating colors is off again! Here is the JSFiddle:http://jsfiddle.net/Pw46A/7/

Any ideas?