# CSS Tabular Data Design

**URL:** https://forum.kirupa.com/t/css-tabular-data-design/167397
**Category:** web dev
**Created:** [October 27, 2005, 8:49pm UTC](https://forum.kirupa.com/t/css-tabular-data-design/167397 "2005-10-27T20:49:15Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![wyclef](https://avatars.discourse-cdn.com/v4/letter/w/65b543/32.png) [@wyclef](https://forum.kirupa.com/u/wyclef)
#### Post date: [October 27, 2005, 8:49pm UTC](https://forum.kirupa.com/t/css-tabular-data-design/167397/1 "2005-10-27T20:49:15Z")

</div>

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.

```auto

<!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>

```
