Can <tr> borders be set in CSS?

**KingOfMyCastle** · May 9, 2005, 11:34

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).

Can anybody help?

John King..

**all4nerds** · May 9, 2005, 12:09

Hello

styled borders for tables are no problem,

first example set cellspacing to 0 <table cellspacing="5" id="prices"> and see what happens, if you want lots of colors

second example is a table on a background color with cellspacing="1" for the borders

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>12345 12345 12345 12345 12345 </title>
	<style type="text/css">
	body{
	background:#f5deb3;
	}
	.divtba,.divtbb{
	position:absolute;
	top:10px;
	left:10px;
	}
	.divtbb{
	left:300px;
	}
	table{
	background-color:#ffffcc;
	}
	td,th{
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	color:#808000;
	font-size:10px;
	font-style: italic;
	padding: 5px;
	text-align: left;
	vertical-align:bottom;
	border-color: #39c;
	border-width: 1px 1px 0 0;
	border-style: solid; 
	}
	.hia{height:20px;}
	.hib{height:30px;}
	.hic{height:40px;}
	
	th{
	font-size:12px;
	color:#000000;
	font-weight:900;
	}
	.cb,.cc,.cd{
	border-width: 1px 1px 1px 0;
	}
	.h,.a,.b{
	border-width: 1px 1px 0 1px;
	}
	.c{
	border-width: 1px 1px 1px 1px;
	}
	.ac{
	border-color: #ff0000 #ff0000;
	}
	.bc{
	border-color: #ff0000 #09c;
	}
	.ab{
	border-color: #09c #ff0000;
	}
	.b,.cd,.hc{
	background-color: #f4a460;
	color: #ffffff;
	} /* */
	table#pricesx{
	background-color:#39c;
	
	}
	#pricesx td, #pricesx th{
	color:#000000;
	border-width: 0 0 0 0;
	background-color:#ffffcc;
	}
	#pricesx th{
	color:#000000;
	}
</style>
</head>
<body>
<div class="divtba">
<table cellspacing="0" id="prices">
<tr>
<th class="h">12345</th>
<th class="hb">12345</th>
<th class="hc">12345</th>
<th class="hd">12345</th>
</tr>
<tr >
<td class="a hia">12345</td>
<td class="ab">12345</td>
<td class="ac">12345</td>
<td class="ad">12345</td>
</tr>
<tr>
<td class="b hib">12345</td>
<td class="bb">12345</td>
<td class="bc">12345</td>
<td class="bd">12345</td>
</tr>
<tr>
<td class="c hic">12345</td>
<td class="cb">12345</td>
<td class="cc">12345</td>
<td class="cd">12345</td>
</tr>
</table>
</div>
<div class="divtbb">
<table cellspacing="1" id="pricesx">
<tr>
<th>12345</th>
<th>12345</th>
<th>12345</th>
<th>12345</th>
</tr>
<tr>
<td class="hia">12345</td>
<td>12345</td>
<td>12345</td>
<td>12345</td>
</tr>
<tr>
<td class="hib">12345</td>
<td>12345</td>
<td>12345</td>
<td>12345</td>
</tr>
<tr>
<td class="hic">12345</td>
<td>12345</td>
<td>12345</td>
<td>12345</td>
</tr>
</table>
</div>
</body>
</html>

**KingOfMyCastle** · May 9, 2005, 13:32

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.

JK..

**KingOfMyCastle** · May 9, 2005, 13:39

And it seems weird how removing all the <tr> info from this bit of css doesn't make any difference to the table:

.musicforsale {
font: 0.75em Verdana, Geneva, Arial, helvetica, sans-serif;
border-width: 2px 20px 2px 2px;
background-color:#39c
}

.musicforsale tr {
color: #FFFFFF;
border-width: 10px 10px 10px 10px;
border-top: 50px solid #000000;
}

.musicforsale td {
color: #000000;
border-width: 20px 20px 20px 20px;
background-color: #FFFFCC;
}

Its as the <tr> doesn't work and I cant seem to get 10 or 20px borders at all.

I'm using this in the HTML:

<table summary="List of Records For Sale" class="musicforsale">
<tr>
.....
.....
</tr>
</table>

Is that right?

JK..

**all4nerds** · May 9, 2005, 14:20

Hello

yes a td needs something in it, i am not shure what your target is ?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>12345 12345 12345 12345 12345 </title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	.musicforsale td{
	font: 0.75em Verdana, Geneva, Arial, helvetica, sans-serif;
	width:120px;
	padding: 30px 2px 5px 10px;
	background-color: #FFFFCC;
	border-style: solid;
	border-color: #39c;
	border-width: 0px 0px 60px 0px;
	}
	table{
	border-style: solid;
	border-color: #39c;
	border-width: 60px 20px 0px 20px; 
	
	}
	</style>
	<script type="text/javascript">

	</script>
</head>
<body>
<table summary="List of Records For Sale" class="musicforsale" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>&nbsp;12345</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;12345</td>
</tr>
<tr>
<td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
</table>
</body>
</html>

**AutisticCuckoo** · May 9, 2005, 14:22

According to the CSS specification, the following applies for border-collapse:separate:

Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements).

You must set your border properties on the TABLE, TD and/or TH elements, not on the TR, with the separate border model (which is the default, unless stated otherwise).

For border-collapse:collapse, however:

In the collapsing border model, it is possible to specify borders that surround all or part of a cell, row, row group, column, and column group.

**KingOfMyCastle** · May 9, 2005, 15:09

Okay Tommy, setting "border-collapse" to "collapse" has given me back control of some of the table. I can now get horizontal row lines using just this:

.musicforsale {
font: 0.70em Verdana, Geneva, Arial, helvetica, sans-serif;
border-collapse: collapse;
}

.musicforsale tr {
border-top: 1px solid #000000;
}

.musicforsale td {
color: #000000;
background-color: #BBFFFF;
}

But wait! Just checked in IE and its not working, there's no lines at all. Firefox is fine.

Also I couldn't seem to have any effect on borders using the border-width or border-color commands. Only the border-top. This is getting weird.

Can you give me any more help?

JK..

**KingOfMyCastle** · May 9, 2005, 15:43

Okay, I've just FTP'd the html and css:

http://www.KingOfMyCastle.freeserve....t4/music4.html

http://www.KingOfMyCastle.freeserve....st4/style4.css

.musicforsale {
font: 0.70em Verdana, Geneva, Arial, helvetica, sans-serif;
border-collapse: collapse;
border: 10px solid red;
}

.musicforsale tr {
border-top: 10px solid #000000;
border-style: solid;
border: 10px solid blue;
}

.musicforsale td {
color: #000000;
background-color: #BBFFFF;
}

As you can see Firefox handles it totally differently than IE. It's as if the <tr> data doesn't work on IE. How do I get some uniformity accross both browsers?

Thanks.

JK..

**all4nerds** · May 9, 2005, 16:00

Hello

one more try

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
			"http:///www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>KingOfMyCastle</title>
<meta http-equiv="content-type"
			content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	html, body {
	margin: 0;
	padding: 0;
	color: #000000;
	font-size: 1em;
	font: 1em helvetica, Geneva, Verdana, Arial, sans-serif;
}

#content {
	margin-top: 8px;
  margin-left: 199px;
 	margin-right: 11em;
	border: 1px solid #000000;
	background-color: #DDFFFF;
	padding: 5px 15px 10px 15px;
} 
  
/*.musicforsale {
	font: 0.70em Verdana, Geneva, Arial, helvetica, sans-serif;
	border-collapse: collapse;
	border: 10px solid red;
}

.musicforsale tr {
	border-top: 10px solid #000000;
	border-style: solid;
	border: 10px solid blue;
}

.musicforsale td {
	color: #000000;
	background-color: #BBFFFF;
} */
	.musicforsale td{
	font: 0.75em Verdana, Geneva, Arial, helvetica, sans-serif;
	width:120px;
	padding: 30px 2px 5px 10px;
	background-color: #FFFFCC;
	border-style: solid;
	border-color: #39c;
	border-width: 0px 0px 40px 0px;
	}
	table{
	border-style: solid;
	border-color: #ff0000;
	border-width: 20px 20px 20px 20px; 
	
	}
	</style>
</head>
<body>
<div id="content">

<table summary="List of Records For Sale" class="musicforsale" border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td width="25%">TOKYO OFFSHORE PROJECT</td>
  <td width="23%">Hyperambient</td>
  <td width="20%">Balance Prescription</td>
  <td width="22%">&nbsp;</td>
  <td width="6%">12</td>
  <td width="4%">&nbsp;</td>
 </tr>
 <tr>
  <td>WULF n BEAR</td>
  <td>Raptures of the Deep</td>
  <td>20:20 Vision</td>
  <td>&nbsp;</td>
  <td>12</td>
 <td>&nbsp;</td>
 </tr>
 <tr>
  <td>CHUGGER</td>
  <td>Thank You - Chuggles Revenge</td>
  <td>Back To Basic</td>
  <td>Prescription track</td>
  <td>12</td>
   <td>&nbsp;</td>
 </tr>
 <tr>
  <td>SCAN X</td>
  <td>Higher + The Soul</td>
  <td>F Comm</td>
   <td>&nbsp;</td>
  <td>12</td>
  <td>02</td>
 </tr>
 <tr>
  <td>D'PAC</td>
  <td>Took Me 4 Granted</td>
  <td>Crash Records</td>
  <td>inc. Dino &amp; Terry mix</td>
  <td>12</td>
  <td>97</td>
 </tr>
 <tr>
  <td>RED SNAPPER</td>
  <td>Snapper EP</td>
  <td>Flaw Records</td>
  <td>Very rare early 12&quot;</td>
  <td>12</td>
  <td>94</td>
 </tr>
 <tr>
  <td>BUSHWACKA!</td>
  <td>Boomtang EP</td>
  <td>Plink Plonk</td>
  <td>Matthew Bushwacka B</td>
  <td>12</td>
  <td>95</td>
 </tr>
 <tr>
  <td>SCANTY SANDWICH</td>
  <td>Day and Night</td>
  <td>Southern Fried</td>
   <td>&nbsp;</td>
  <td>12</td>
  <td>00</td>
 </tr>
 <tr>
  <td>JOE MONTANA</td>
  <td>A New Day</td>
  <td>Deep Touch Records</td>
   <td>&nbsp;</td>
  <td>12</td>
   <td>&nbsp;</td>
 </tr>
 <tr>
  <td>ELECTRACOUSTIC</td>
  <td>Pacific Coast Highway</td>
  <td>Outer</td>
  <td>Kerri Chandler mix</td>
  <td>12</td>
   <td>&nbsp;</td>
 </tr>
 <tr>
  <td>STAKKER</td>
  <td>Stakker Humanoid</td>
  <td>Westside Records</td>
  <td>FSOL</td>
  <td>12</td>
  <td>88</td>
 </tr>

</table>
</div>

</body>
</html>

**AutisticCuckoo** · May 9, 2005, 23:18

Originally Posted by KingOfMyCastle

.musicforsale {
font: 0.70em Verdana, Geneva, Arial, helvetica, sans-serif;
border-collapse: collapse;
border: 10px solid red;
}

The table's border will be disappear under the row borders in the collapsing border model. You know that, right?

Originally Posted by KingOfMyCastle

.musicforsale tr {
border-top: 10px solid #000000;
border-style: solid;
border: 10px solid blue;
}

The first two rules are unnecessary here. The second rule will add a 0px solid border with the default foreground colour (i.e. nothing visible). The third rule overwrites both of the preceding ones.

Originally Posted by KingOfMyCastle

As you can see Firefox handles it totally differently than IE. It's as if the <tr> data doesn't work on IE. How do I get some uniformity accross both browsers?

Oh my god! There's a bug in IE?!

It seems as if IE doesn't handle this.

I think the easiest way to get decent cross-browser behaviour would be something like this:

Code:

.musicforsale {
  border-collapse:collapse;
  border:0 solid blue;
  border-width:10px 10px 0;
}

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

**dotjay** · May 10, 2005, 00:47

Thought this was worth mentioning...

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).

**KingOfMyCastle** · May 10, 2005, 02:16

Thanks for the replys.

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.

John King..

**Kravvitz** · May 10, 2005, 08:27

Use a non-breaking space.

Code:

<td>&nbsp;</td>

**dotjay** · May 10, 2005, 08:37

Can you not use the following in the CSS?

Code:

td{
empty-cells: show;
}

**Kravvitz** · May 10, 2005, 08:45

IE doesn't support it.

**AutisticCuckoo** · May 10, 2005, 10:32

Note that 'empty-cells' is only meaningful in the separate border model. In the collapsing border model, empty cells are always shown, unless memory fails me at this advanced age.

So, didn't my example work for you then?

**KingOfMyCastle** · May 11, 2005, 02:52

Originally Posted by AutisticCuckoo

So, didn't my example work for you then?

Yes, it worked fine. Thank you very much.

JK..

The SitePoint Forums have moved.

User Tag List

Thread: Can <tr> borders be set in CSS?

Thread Tools

Display

Can <tr> borders be set in CSS?

Bookmarks

Bookmarks

Posting Permissions