Zebra striping to just one table column

Question

I have a table that uses tablesorter and zebra striping for the table rows. I would like to add zebra striping to just one of the table COLUMNS to give it a little emphasis. like this:

Answer 1

If you know the column index of the one you'd like to stripe, you can do it in CSS only, using :nth-of-type selectors like so:

tr:nth-of-type(even) td:nth-of-type(3) { background: rgba(0,0,0,0.1); }

(Where 3 is being used a placeholder for your target column index)

Another option would be to put a class on the header (or first td) of the column you want to stripe, and then use JS to stripe the other tds in the same column:

var col_to_stripe = $('th.stripe-this-one').index();

$('table.selectively-stripe').find('tr:odd')
  .each(function() {
    $(this).children('td')
      .eq(col_to_stripe)
      .css('background', 'pink');
  });

The class is not necessary as obviously you can just put the column index you want as with the pure CSS approach, but it's better for clarity of code.

demo here: http://jsbin.com/axutal/2/edit

Answer 2

check this link

This can be done using jQuery without giving class names or id's.

 $('tr:odd  td:nth-child(4)').css('background','#999999'); /* For odd td's */
 $('tr:even td:nth-child(4)').css('background','#DDDDDD'); /* For even td's */  

For more information on this jQuery selector go through this link

Answer 3

You'll need an additional class name and corresponding CSS declaration for the TDs in that column.