I have a table like this:

<table>
    <tr><td>Not This</td><td rowspan="3">This</td></tr>
    <tr><td>Not This</td></tr>
    <tr><td>Not This</td></tr>
    <tr><td>Not This</td><td>This</td></tr>
</table>

How can I select just the right-most cells (containing "This") in each row so I can set the border-color?

I tried something like:

table.find('tr > td:last-child').addClass('someclass');

But that selects the last cells on the 2nd and 3rd rows even though they are not the right-most cell.

I am not using border-collapse on my table, and would prefer to avoid it.

I have a table like this:

<table>
    <tr><td>Not This</td><td rowspan="3">This</td></tr>
    <tr><td>Not This</td></tr>
    <tr><td>Not This</td></tr>
    <tr><td>Not This</td><td>This</td></tr>
</table>

How can I select just the right-most cells (containing "This") in each row so I can set the border-color?

I tried something like:

table.find('tr > td:last-child').addClass('someclass');

But that selects the last cells on the 2nd and 3rd rows even though they are not the right-most cell.

I am not using border-collapse on my table, and would prefer to avoid it.

• javascript
• jquery
• css-selectors
• html-table

• I should be more clear. The :gt(0) solution works for this example table, but I would like a more generic solution since my table can be variable cell widths. I would like the right-most (as rendered in html) cells. – Code Commander Commented Dec 9, 2010 at 21:14
• @Code Commander - I believe my solution will work like that. – Ender Commented Dec 9, 2010 at 21:22
• @Ender - so will mine :) – Bryan Downing Commented Dec 9, 2010 at 21:34
• @Bryan Downing - Sorry, but I beg to differ: jsfiddle/Ender/R97zz – Ender Commented Dec 9, 2010 at 21:38
• @Ender - Hell, I beg to differ with myself. Good solution! – Bryan Downing Commented Dec 9, 2010 at 22:33

4 Answers 4

This one required a bit of trickery:

$(function() {
    $('td:last-child[rowspan]').each(function() {
        $(this).parent().nextAll().slice(0,$(this).attr('rowspan')-1).addClass('skip');
    });
    $('tr:not(.skip) > td:last-child').addClass('someclass');
    $('.skip').removeClass('skip');
});

So, you begin by looking for any td that is a last child and has a rowspan attribute. You iterate over those, counting rows after each one and adding a class to each of those rows to "skip" them. Then you add your class to the last-child cells that aren't in a "skip" row, and finally remove the skip class.

Demo here: http://jsfiddle/Ender/rzqEr/

You should be able to skip the first <td> like so:

$("table tr td:gt(0)").addClass('someclass');

You could go with something like this, might be an expensive lookup if you have many rows though:

$('table tr').each(function(){

  if( $('td',this).size() > 1 ){
    $(this).find('td:last-child').addClass('someclass');
  };

});

Here's a JSBin demo

You could also do this, taking from the Spolto's example:

$('table tr').each(function(){

  $('td:gt(0)',this).addClass('someclass');

});

Another JSBin demo

This should work:

$("TD ~ TD:last-child").addClass('someclass');

Setting the border on the table itself would probably work too.