Change height to odd rows using CSS & jQuery

Question

I have a table with 3 columns. The second column needs to have no styling. With that, every other row needs no styling and a height of 20px. I'd like to do this directly with jQuery. In the jsfiddle example the 2nd row height is the height I want all alternate rows to be (20px), but can't get that without setting the class height to 0px and applying the class directly to the tags. Can someone please help? (I hope I'm being clear). Thanks!

My example is in jsfiddle here. [http://jsfiddle.net/squirc77/g6gKQ/]

Answer 1

First Off you don't need to add this height styling to the rows as it will only interfere with the jQuery styling so get rid of the

height: 85px;

in

#tbl_notice td { border: 1px solid #f2f2f2; width: 400px; height: 85px; vertical-align:middle; background: transparent url(images/fieldsetBgLg.png) repeat-x; }

You don't actually need this line.

#tbl_notice tr td.oddRow{height:0px;}

Just make sure to get rid of the no break spaces (nbsp; in your odd rows and in the middle column as this prevents you from making your rows and columns whatever height and width you wish.

After these changes your jQuery code should work just fine.

Here is the JSFiddle for the changes I made.