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.
Since I am using the jQuery TableSorter, when ever I sort the table, the row colors also change. Help!
<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 {
Viewing 15 lines of 28 lines. View entire code block.
Since I am using the jQuery TableSorter, when ever I sort the table, the row colors also change. Help!
This is what I came up with:http://jsfiddle.net/Pw46A/2/ It doesn't work. Any ideas?
Re-fiddled
http://jsfiddle.net/Pw46A/3/
Ses
http://twitter.github.io/bootstrap/assets/css/bootstrap.css...
lines 2141..2143
http://jsfiddle.net/Pw46A/3/
Ses
http://twitter.github.io/bootstrap/assets/css/bootstrap.css...
lines 2141..2143
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.
You probably still have the .alt css rule:
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.
#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.
Duh! Completely overlooked that! Thanks!
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?
Any ideas?
For some ideas, have a look at the bootstrap css for zebra striped tables.
http://twitter.github.io/bootstrap/base-css.html#tables...