CSS Tabular Data Design

Hi,

I’m having trouble designating fixed widths for the <TH> cells. I’ve tried using .left-col, .midl-col, and .rite-col. Have a look.


<!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></title>
		
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
				
		<style type="text/css">
	
table, tr, th, td {
	margin: 0; padding: 0;
	border: 1;
	}
	
table {
	margin: 0 40px; 
	border-bottom: 1px solid #e7e7e7;
	caption-side: top;
	width: 318px;
	}
	
caption {
	margin: 10px 40px 0 40px; padding: 5px 10px;
	text-align: left;
	color: #fff; 
	font-weight: bold; 
	background: #06c;
	-moz-border-radius: 3px;
	}
	
th {
	margin: 0; padding: 5px 10px;
	font-weight: normal;
	text-align: left;
	color: #888; background: #ccc; 
	}
	
td, tbody th {
	padding: 10px;
	border-top: 1px solid #e7e7e7;
	vertical-align: top;
	}
	
.row1, .row1 td, .row1 th {
	background: #fff;
	} 
	
.row2, .row2 td, .row2 th {
	background: #fafaf7;
	}

.left-col { width: 80px; }
.midl-col { width: 170px;}
.rite-col {width: 68px;}

</style>
	</head>

	<body>
					<table cellspacing="0" cellpadding="5" border="1">
						<caption style="background: green;">Caption</caption>
						<thead>
							<tr>
								<th scope="col" class="left-col">HEAD 1</th>
								<th scope="col" class="midl-col">HEAD 2</th>
								<th scope="col" class="rite-col">HEAD 3</th>
							</tr>
						</thead>
						<tbody>
							<tr class="row1">
								<td>02-25-2005</td>
								<td>At the Printer</td>
								<td>&radic;</td>
							</tr>
							<tr class="row1">
								<td>02-25-2005</td>
								<td>At the Printer</td>
								<td>&radic;</td>
							</tr>
							<tr class="row1">
								<td>02-25-2005</td>
								<td>At the Printer</td>
								<td>&radic;</td>
							</tr>
						</tbody>
					</table>
	</body>
</html>