Search code examples
javascriptjquerycsstablesorterzebra-striping

Zebra striping to just one table column

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:

The general idea of what I'm looking to do

Solution

  • 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