How to create a table WITHOUT alternating row colo

Question

The Blueprint CSS framework makes all table rows of alternating colors by default. How to disable this behaviour for one table?

I tried to use Chrome Developer Tools to see all the styles Chrome uses for a defined table, but did not find the style which would set the colors for rows. I also searched the Internet and did not find a solution. It's like magic...

Anyone can help me out?

Answer 1

I would just do override in my own css file

tbody tr:nth-child(even) td, tbody tr.even td {background:none;}

Answer 2

This is what I put into the top of my CSS file to disable Blueprint's even table rows background color.

table tr:nth-child(even) td {
  background: transparent;
}

Answer 3

Possibly search for and remove (From screen.css)

tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}

Answer 4

You need a more specific selector to override... BP is pretty general though so that shouldnt be an issue for example:

table.no-zebra tbody tr:nth-child(even) td,
table.no-zebra tbody tr.even td {
  background: transparent;
}

you can replace transparent with whatever color to make all rows a solid color.