zebra stripes over riding my highlighting color [duplicate]

This question already has an answer here: Closed 11 years ago.

Possible Duplicate:

zebra stripes over riding my highlighting color

I am using this code to navigate through keyboard in table grid.In my code i have not added this zebra stripes coding.If i add this zebra stripes is overriding my highlighting. eg:first row dark color and second row white color.I can 开发者_Go百科see highlight through keyboard in first row but i can see in second row.

[http://jsfiddle.net/hKZqS/15/]

This coding for zebra stripes

$("#myTable").tablesorter({ widgets: ['zebra']} ); 

I have an alternate solution is using border but how do i apply it here in my css.

---

You need the rules that set the highlight color to be stronger than the zebra colors. For example:

tr.ui-selecting { background: #eee; }
tr.ui-selected { background: #dde; }

.odd {background-color: #ffd;}
.even {background-color: #dff;}

http://jsfiddle.net/hKZqS/16/

Other options are using .ui-selected,.ui-selected.even,.ui-selected.odd, or an !important rule if you're having a bad day.

See also: CSS Specificity: Things You Should Know

---

Well, considering your question just builds on my answer from yesterday's question (which I got no rep for >:x), I updated my jsFiddle to use the border for highlighting as well. Maybe try something like this. Just remember to set the border on the other classes to "none" and add in a padding or margin so the rows don't "jump".