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?

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?

• javascript
• jquery
• css

• 1 I thought one cannot even style trs because they are only "logical" elements. – Felix Kling Commented Jul 4, 2011 at 10:24
• Oh! It was working for me in Chrome, but forgot to check it in IE, and in IE8 the styling is not working... – oshirowanen Commented Jul 4, 2011 at 10:26
• FWIW, it works in FF5. Interesting how things change... – Felix Kling Commented Jul 4, 2011 at 10:27
• Unfortunately, I need it to work in IE7 and IE8. – oshirowanen Commented Jul 4, 2011 at 10:31

5 Answers 5

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.

Use css2:

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

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

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

Use a CSS selector for this:

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

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