How to create a table WITHOUT alternating row colors when using Blueprint CSS framework?

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

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.

Answer 2

I would just do override in my own css file

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

Answer 3

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 4

Possibly search for and remove (From screen.css)

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