0

DISCLAIMER,

I am not a programmer.

What would be the easiest way to implement alternating css row colors in a table for a drupal 7 theme? Thanks!

4

To augment @Clive's answer, drupal also adds a CSS class of "odd" and "even" to each TR element in the default theme table, so you could use them, too, eg:

tr.odd { background-color: #ccc; }
tr.even { background-color: #aaa; }

These are based on the $zebra variable that is available in a lot of templates just for this purpose.

  • 1
    Forgot about that!...it's great for tables that run through theme_table() but it might not catch everything...safest thing would probably be to add both sets of rules, then all bases are covered – Clive Jul 9 '12 at 16:02
  • 2
    safest would be to banish IE < 9 but don't get me started there :) – Jimajamma Jul 9 '12 at 16:03
  • This type of row classing is so inefficient, we already have so many ids, classes, wrappers; Go with elegant CSS (I know Drupal adds those alternating classes anyway, I just dont like it) – Duncanmoo Jul 9 '12 at 18:46
5

The easiest way would be straight CSS using the :nth-child pseudo-selector:

tr:nth-child(even) td { background: #ccc; }
tr:nth-child(odd) td { background: #aaa; }

The usual caveats apply (i.e. it doesn't work in Internet Explorer <9)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.