Equal width across most columns

HTML & CSS
1

I’m sure I ought to know the answer to this but I’m struggling…

I have a table with a width of 100% of its parent. That bit is easy.

The first column contains a list of names.
The last column contains percentages to 1 decimal place.
The 20–30 intermediate columns contain just numbers.

This is a template that will be used with a varying number of columns and varying contents, so it needs to be a flexible solution.

I want the first and last columns to have sufficient width to accommodate their contents, but the intermediate columns to share the available width remaining equally. Unfortunately, because some columns might only contain single-digit numbers but others include two-digit or negative numbers, leaving the width alone means that the columns are not equally spaced.

I’m sure I remember reading that there was a trick with width:*; but I can’t find any documentation for it and it isn’t working when I try applying it to the relevant <th> cells by using a class. Any suggestions?

2

I don’t think you can do this as described. There are TWO rendering modes for the TABLE element ( fixed/auto). One renders based on content the other sizes cells equally. Of course you can override the latter by giving the cell a defined width and the REMAINING cells will calculate based on dividing the remaining space equally. The problem is IF YOU dont want to DECLARE a fixed space to first and/or last columns, there is no “priority” mode when it comes to table rendering.

see what I did here… hopefully it will help ( I used CSS3 selectors cause I am lazy, but you can use class names for max cross browser compatibility)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
table{border:1px solid #000; border-collapse: separate; border-spacing:0; width:100%}
td{border: 1px solid #ccc; border-bottom:none; border-right:none; padding:10px}
tr:first-child td{border-top:none;}
tr td:first-child{border-left:none; max-width:15em}
tr td:last-child{width:2em;}
		</style>
	</head>
	<body>
		<table>
				<tr>
					<td>this is a name</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>1.55</td>
				</tr>
				<tr>
					<td>this is a name</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>0.55</td>
				</tr>
				<tr>
					<td>this is a name</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>1.05</td>
				</tr>
				<tr>
					<td>another name</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>1.25</td>
				</tr>
				<tr>
					<td>some name</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>1.15</td>
				</tr>
				<tr>
					<td>name</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>#</td>
					<td>1.00</td>
				</tr>
		</table>
	</body>
</html>