Using CSS to create a table to these specs...

Details inside...

[twotasty]

I need to create a table where everywhere cell has a border of 1px, ie something that looks like this...
[warcraft50.com...]

Yet when I define a td class and add that class to every td, I get double borders where the two td's make contact.

td.this {
 background-color:#FFF;
 border:1px solid c0c0c0;
 padding:5px;
}

The above code gives me the aforementioned problem. Any help would be greatly appreciated.

[Purple Martin]

You won't like this work-around but...

You could use different classes for different types of cells, and set only some of the borders for each type of cell to avoid the double-up. For example, to give a cell top and left borders only:

td.this {
background-color:#FFF;
border-top:1px solid c0c0c0;
border-right:0px solid c0c0c0;
border-bottom:0px solid c0c0c0;
border-left:1px solid c0c0c0;
padding:5px;
}

[Wrasse]

Why don't you try this in your table class?

table {border: 1px solid c0c0c0;
border-collapse:collapse}

That should take care of the problem

/Anders

[MonkeeSage]

Hi there twotasty,

This is a closest I could get to the picture:

 <style type="text/css">
 table {
 border-bottom: 1px solid black;
 border-right: 1px solid black;
 }
 td {
 border-top: 1px solid black;
 border-left: 1px solid black;
 border-bottom: 0;
 border-right: 0;
 width: 88px;
 height: 32px;
 }
 </style>

<div>
<table cellspacing="0" cellpadding="0" border="0">
 <tr>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td></td>
 <td></td>
 </tr>
</table>
</div>

Jordan

========

Ps. Welcome to WebmasterWorld, Wrasse!

[twotasty]

Thanks alot Sage. That simplified things a great deal.