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

Asked 22/12, 2010 at 19:4 Answered 6/6, 2011 at 14:26

Solved css colors row css-tables blueprint-css

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?

Delirious answered 22/12, 2010 at 19:4 Comment(0)

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.

Betthezel answered 22/12, 2010 at 19:11 Comment(1)

Thanks! This answers my question accurately - to disable the styling for one specific table. – Delirious 22/12, 2010 at 19:34

I would just do override in my own css file

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

Fellers answered 13/4, 2011 at 14:42 Comment(0)

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

Stickle answered 6/6, 2011 at 14:26 Comment(0)

Possibly search for and remove (From screen.css)

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

Macaroni answered 22/12, 2010 at 19:7 Comment(2)

That would turn off striping of all tables not just one or one's of a particular class. – Betthezel 22/12, 2010 at 19:12

Don't change blueprint, just override it. It's a bad idea to change the library -- if you load a new version of the library, you won't remember which one you removed, etc. If you override the CSS rules, when you get a new copy of the library, your overrides still function. If you want to generically remove the zebra strips from all tables, you can override the rule by adding a class or ID to your <body> tag, and create a rule for table under that class or ID. – Interval 25/1, 2011 at 14:32

Recommended topics

Hot tags