Alternate Row Colours on Tables with Inline Style CSS

css inline-styles
williamwmy picture williamwmy · Apr 23, 2013 · Viewed 29.2k times · Source

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

BoltClock picture BoltClock · Apr 23, 2013

Inline styles are per-element, so you would have to inject the appropriate styles into the style attribute of every other tr element. If you're not already generating these rows dynamically, and you cannot use JavaScript to inject these styles, then you're stuck with having to manually apply the attribute on each tr element.

Related questions

How to write a:hover in inline CSS?

I have a case where I must write inline CSS code, and I want to apply a hover style on an anchor. How can I use a:hover in inline CSS inside the HTML style attribute? E.g. you can't …

Read More
React.js inline style best practices

I'm aware that you can specify styles within React classes, like this: const MyDiv = React.createClass({ render: function() { const style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); Should I …

Read More
Using CSS :before and :after pseudo-elements with inline CSS?

I'm making an HTML email signature with inline CSS (i.e. CSS in style attributes), and I am curious as to whether it's possible to use the :before and :after pseudo-elements. If so, how would I implement something like this …

Read More