Thin table borders

HTML & CSS
1

It’s seems like ages ago that I used tables for the last time and my memory on how to solve certain things, seems to be solved. I need a small calendar which obviously need borders around each <td>. This is what I have sofar:


.calendar table { 
	border: 1px solid #000;
	text-align: center;
	padding: 0;
	margin: 0;
	 
}

.calendar th, .calendar td { 
	border: 1px solid #000;
	font-size: 12px;
	padding: 2;
	margin: 0;
}

But since the cells touch each other the 1px becomes 2px. I thought to remember that setting a background-color for the <th> and <td> would solve that problem, but that thought was wrong. Any suggestion would be more than welcome.

Thank you in advance;

2

Table Formatting

3

border-collapse: collapse;

4

Stomme Poes has it correct – border-collapse:collapse is the best answer as it will do exactly what you want.

ANOTHER technique is to put border-width:0 0 1px 1px on the table, and border-width:1px 1px 0 0 on your TD/TH… then you only have ONE border.