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

问题

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?

回答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.

回答2:

I would just do override in my own css file

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

回答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;
}

回答4:

Possibly search for and remove (From screen.css)

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

来源：https://stackoverflow.com/questions/4512731/how-to-create-a-table-without-alternating-row-colors-when-using-blueprint-css-fr