Any Rails + 960gs Gurus here? - zebra striping tables

rubyonrails-talk
1

People,

For zebra striping tables on basic Rails apps I have quite happily used:

   <tr class="<%= cycle('oddrow', 'evenrow') %>">

in the table listing in index.html.erb with

   table tr.evenrow { background-color: white; }    table tr.oddrow { background-color: silver; }

in the application style sheet but I can't get it to work with the 960 Grid System stuff.

I have messed around using "tbody" tags and nth-child etc but can't get anywhere - anyone got any clues? I can't find any mailing list or other support for 960gs.

Thanks,

Phil.

2

forget this, try CSS: even and odd rules

- so, make your strips with CSS, not with your application

tom

3

Tom,

I have tried that (if you read more closely you will see) - that is why I was asking if anyone was familiar with the 960gs - their existing style sheets seem to be blocking whatever I try . .

Thanks,

Phil.

4

did you check order of your stylesheets? Your stylesheet should be the last one. Use inspector tool and check style property.

or add important to your definition

eg

table.mytable tr:nth-child(even) {background: #CCC !important;}

tom

5

Tom,

I put mine last but it didn't help.

However, then I used the inspector tool which eventually led me to a better understanding of the supplied stylesheets - and I realised there was already something there for ODD rows ONLY - I missed it before because I was expecting a mention of both odd and even next to each other - in this case, tr.odd just makes the odd rows have a background of white when normally all the rows will have a background of light grey.

Thanks!

Phil.

6

Use twitter-bootstrap and you will forget about it: http://twitter.github.com/bootstrap/base-css.html#tables

Just add the needed gems into your Gemfile:

gem 'bootstrap-will_paginate', '~> 0.0.9'

gem 'bootstrap-datepicker-rails', '~> 0.6.37'

gem 'bootstrap-sass', '~> 2.2.2.0'

and require bootstrap in your css file (in the very first line:

@import “bootstrap”;

and you are done.