Search code examples
csscolorsrowcss-tablesblueprint-css

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?

Solution

  • 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.