Removing styling from last TR

Question

I have a table where I have set the tr style to:

border-bottom:1px silver solid;

The table is database generated, and I don't want the last tr to have the bottom border.

How to I stop the last tr from getting the styling?

Answer 1

You can select the last tr using javascript or CSS, but if you choose to do it with CSS it won't work on all browsers (nor will the JS solution on browsers that don't have JS enabled).

jQuery:

$('#tableID tr:last').css('border-bottom',0);

or if multiple instances:

$('.tableClass tr:last-child').css('border-bottom',0);

The CSS solution would be to just use:

tr:last-child{
border-bottom:0;
}

Note that the :last selector selects only one instance, and as it isn't part of the CSS specification, it isn't quite as fast as last-child selector, but that selection may not be what you are looking for if you have nested tables etc.

Answer 2

Use css2:

table tr:last-child {border: 0;}

Answer 3

$('table tr:last').css('border-bottom', 'none');

here's a fiddle you can see it in action: http://jsfiddle.net/AYzaN/

Answer 4

Use a CSS selector for this:

table#mytable tr:last-of-type{
  border-bottom:none;
}

Answer 5

In CSS3 you can use the not() selector, but a better cross-browser solution (for the moment) would probably be jQuery:

$('table tr:not(:last-child)').css("border-bottom", "1px silver solid");

Demo