Highlighting the clicked row of a striped HTML table

Question

Here\'s an example of my problem on jsFiddle.

I have a table with striped rows imposed by using tr:nth-child(odd) in the CSS, as is done in Twitter Boot

Answer 1

Just edit the Bootstrap .table-striped CSS class to this:

.table-striped tbody tr:nth-child(odd),
.table-striped tbody tr:nth-child(odd) th {
    background-color: #f9f9f9;
}

.table-striped tbody tr:nth-child(even){
    background-color: yellow;
}

Remove all the td styling you do not want. Then it works.

When you click the row this style should also be applied:

.selected { background-color:#2f96b4 !important; }

It will not work without the !important.