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 see highlight through keyboard in first row but i can see in second row.

DEMO

This coding for zebra stripes

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

I have an alternat开发者_运维百科e solution is using border but how do i apply it here in my css

Try adding .tablesorter class to your CSS to make the selector more specific (thanks to Kobi for pointing it out) with something like this:

.tablesorter tr.ui-selected td { background: #f77; }

And to add a border something like this should work:

.tablesorter tr.ui-selected { border: 1px solid black; }

or more fancy:

.tablesorter tr.ui-selected { border: 2px dashed red; }

or something like that.