Alternate Row Colours on Tables with Inline Style CSS

Question

I want to alternate the background colour of a table to increase readability. After googling a bit I found the code I needed.

tr:nth-child(even) {
    background-color: #000000;
}

The problem in my solution, I don't have access to head tag, and I want to implement this with inline style CSS, but it doesnt work.

<tr style="nth-child(even) background-color: #000000;">

Ideas?

Answer 1

I had a similar situation. I solved it by putting a style section just before my table:

<style>
    table#some_table_id tr:nth-child(even) { background-color:#dddddd; }
</style>
<table id="some_table_id">
    <!-- table markup removed -->
</table>

Not the most elegant solution, but it works for me (in Google Chrome 29.0.x).