How can i use css or jquery to add border-top only on the first row in a table?

I'm using the code below to get border on every td, but i need a border for the first row on top as well.

I cannot use CSS3 in this project btw.

What i have:

content

content

content

What i want:

content

content

content

.MyCarTable td {
    border-bottom: 1px solid grey;
}

How can i use css or jquery to add border-top only on the first row in a table?

I'm using the code below to get border on every td, but i need a border for the first row on top as well.

I cannot use CSS3 in this project btw.

What i have:

content

content

content

What i want:

content

content

content

.MyCarTable td {
    border-bottom: 1px solid grey;
}

• javascript
• jquery
• css

• 3 Put the first column in a th and apply border-top and border-bottom to the th? – Andy Commented Nov 6, 2012 at 11:24
• 1 I think it can also be done by giving border-top to table itself? – Mr_Green Commented Nov 6, 2012 at 11:26
• @Mr_Green: that's true, but will become an issue when your table has cellspacing applied to it because top border will render wider (and further away) than others. – Robert Koritnik Commented Nov 6, 2012 at 14:39

3 Answers 3

Everything can be done with CSS only which is in this case preferred way becuase of performance reasons. Don't use javascript unless you actually have to because it can't be done in any other way.

Solution 1: use first-child pseudo class

Add additional style definition.

.MyCarTable td {
    border-bottom: 1px solid #ccc;
}
    .MyCarTable tr:first-child td {
        border-top: 1px solid grey;
    }

And don't worry. This particular pseudo class has been long supported in browsers. Even IE supports it since version 7. Here's a JSFiddle that shows this working.

Solution 2: table header using th elements

If your table has header row, then use th elements instead of td in it and set different styling for header cells. But use this only when semantic content of your first row cells is actually cell header description for rows underneath. Otherwise I wouldn't suggest it.

Consecutive tables problem

If you have consecutive tables within the same container then next tables get top borders from previous table's last row. And you don't want them to apply top border on first row because that duplicates borders.

The solution (as seen in this JSFiddle) is similar and also applies to first table only:

.MyCarTable td {
    border-bottom: 1px solid #ccc;
}
    .MyCarTable:first-child tr:first-child td {
        border-top: 1px solid #f99;
    }​

As you can see top row's borders are only set for first table and first row within it. All consecutive tables won't set it. This example is of course only compatible with first solution above. If you'd taken the path with th elements then a combination of both should be used (th and pseudo classes).

But as you've said you've consolidated your repeater code.

$(".MyCarTable tr:first").css({
    borderTop: "1px solid grey"
});

Try this:

.MyCarTable tr{border-top: 1px solid grey;}
.MyCarTable tr + tr {border-top: none !important;}

Or

.MyCarTable tr td {border-top: 1px solid grey;}
.MyCarTable tr + tr td {border-top: none !important;}

"+" is an adjacent selector in CSS. Adjacent selector is supported in IE7+ and all other modern browsers.