The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Can <tr> borders be set in CSS?

Hi! I've been trying to get a table (of tabular data) to have a line after each row. My HTML has all the correct <tr> </tr> tags. And I've included this CSS:

.musicforsale tr {border-top: 1px solid #000000;}
(The table has a class of "musicforsale")

Now if I add color: #FFFFFF; to this CSS the data in the row will be white so my 'tr' CSS is being picked up by the table. Unfortunately it never displays the 'border-top' that I'm looking for, there are no horizontal lines at all (in IE + Firefox). So is it possible to have table-wide horizontal lines on a table styled with CSS?

As an aside, if I apply the 'border-top' tag to the 'td' instead I get a short line under each cell. (But not empty cells in IE).

Hi! Thanks for the reply. Looking at your code, example 2 looks to be more the approach I'll take as I can't give each <td> a class as it'll be too time consuming. Thanks.

Also lots of the my cells do not have any data at all. If you remove the '12345' from one of those cells on the first example you'll notice that in IE some of the border disappears. I think that was part of my earlier problem.

As I only want to show horizontal borders, not vertical, I'll play around with the examples for a while.

I was trying to do something similar recently and used some scripting to make whole table rows highlight (switching CSS classes) and become "clickable" (yes, it degraded nicely ).

The effect required a top and bottom border for each row. The only way I could get it to work cross-browser was to set the table properties in the HTML. I'm hoping increasing CSS support will make life simpler, but this is the only way I could get the effect I needed. However, in this particular situation, Tommy's solution way well work (after all, he knows what he's talking about).

All4Nerds:
I had a go with your example and it worked okay. But there's a definite problem with empty cells. I suppose I could do a replace on the <TD><TD> strings to fill them up. I was also getting vertical lines on the table which is something I was trying to avoid. Thanks for the input though.

Tommy:
Thanks. I'm still trying to get my head around collapsing tables and no, I wouldn't have automatically assumed that table borders would dissappear under the row's borders. I'm starting to understand it a bit more now though.

Thanks for the cross-browser answer, it works a treat. I still find it hard to believe that IE can't handle - .

musicforsale tr {
border-bottom:10px solid blue;
}

but will handle it if its a 'td'. But I can see now that with collapsable borders you CAN just border the bottom of each cell to achieve the effect (I am right, aren't I? )

Anyway, you've found the solution to my problem and I really appreciate it. Thank you very much.