Setting table border styles

**tryin_to_learn** · Aug 24, 2007 19:53

Scenario is that I have a table that I want to have a 1px solid black border on the outside. The cells on the row with th's should have borders between each cell, also 1px solid black. The other cells in the table have borders between each cell, 1px solid #ccc.

What's the best way to do this? I tried styling the th's and td's to have a border-right, but then when you get to the last th in the row, the border gets doubled. I could certainly give the last th or td in each row a border=0, but I'm thinking there must be a more sophisticated way of doing it. Ideas?

**Dan Schulz** · Aug 25, 2007 01:05

What does your code look like?

**Nadia P** · Aug 25, 2007 05:39

The following works in FFox, IE5.5, IE6 & IE7. Can't open any other browsers to test at this time.

Code HTML4Strict:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#maintable {
width: 500px;
margin: auto auto;
border-collapse: collapse; /*this is what stops the double border appearing on cells*/
border: 1px solid black;
}
#maintable th {border: 1px solid black}
 
#maintable td{
border: 1px solid #CCC;
}
-->
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="maintable">
<tr>
<th scope="col">Heading 1</th>
<th scope="col">Heading 2</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

PS: It's the border-collapse property that removes the double border lines

Nadia

**ozwebfx** · Aug 25, 2007 10:34

Nadia is my new guru!

**tryin_to_learn** · Aug 25, 2007 18:25

Originally Posted by Nadia P

The following works in FFox, IE5.5, IE6 & IE7.
PS: It's the border-collapse property that removes the double border lines

Nadia

This sounds like a great fix but what happened when I brought up the sample is that the black border around the table disappears in favor of the td border color. I even tried marking it ! important but that didn't help. Any ideas for how to get the black border around the whole thing?

User Tag List

Thread: Setting table border styles

Thread Tools

Display

Setting table border styles

Bookmarks

Bookmarks

Posting Permissions