Expert Table Advice Needed

Hi there,

I have been a designer/developer for the last few years but I have managed to steer clear of tables (except in forms), favoring traditional CSS design. Anyway, for my sins I am now paying the price as in my current contract, I have to modify layout for an E-Commerce CMS which is all in nested tables.

Anyway I need to ask any tables experts out there a few questions:

I notice that all of the table cells in my table will adjust to be the width of my widest cell. Is this normal behavior or is there something in the CSS to override to stop this?

I would also like to set minimum heights on my table cells to ensure that when some products have more data than others that those with shorter descriptions do not spoil the table alignment. Can I just use the CSS min-height property on table cells? Does this work on all browsers? Which older browsers do I have to write hacks for with min-height? Will I need html* or will IE7 just behave with the property on a table.

Are there any other ways to keep all columns in a table the same height as the highest cell?

thanks in advance :wink:

All cells in a single column must be the same width and the browser will either adjust to the widest item or in the fixed table layout model adjust to the width you set and wrap the data. e.g.table{table-layout:fixed} td{width:200px}. Of course if widths are over-constrained the browser is allowed to adjust as it sees fit to make things fit.

I would also like to set minimum heights on my table cells to ensure that when some products have more data than others that those with shorter descriptions do not spoil the table alignment. Can I just use the CSS min-height property on table cells? Does this work on all browsers? Which older browsers do I have to write hacks for with min-height? Will I need html* or will IE7 just behave with the property on a table.

The effect of ‘min-height’ and ‘max-height’ on tables, inline tables, table cells, table rows, and row groups is undefined and therefore cannot be relied upon. In Firefox (and others) min-height doesn’t apply to table-cells but height does (e.g. td{height;100px}). Table always treat height as a minimum anyway and will always expand to accommodate the content.

It’s probably better if you post some code and then we try and help you with any problems you are having.:slight_smile:

Are there any other ways to keep all columns in a table the same height as the highest cell?

thanks in advance ;)[/QUOTE]

Hi thanks so much Paul,

That’s all great, much clearer now, I also notice that even when I use table-layout:fixed; I am still unable to size the columns in percentages but pixels work just fine. Is this normal behavior too?

Hi,

It seems to work ok form me as long as you don’t have fixed data pushing things wide or dimensions over-constrained.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
div {
	width:60%;
	margin:auto;
}
table {
	table-layout:fixed;
	width:100%;
}
td { border:1px solid #000 }
.td1 { width:10%; }
.td2 { width:50%; }
.td3 { width:25% }
.td4 { width:15% }
</style>
</head>

<body>
<div>
		<table  cellspacing="0" cellpadding="0">
				<tr>
						<td class="td1">1</td>
						<td class="td2">2</td>
						<td class="td3">3</td>
						<td class="td4">4</td>
				</tr>
				<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
				</tr>
				<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
				</tr>
				<tr>
						<td>1</td>
						<td>2</td>
						<td>3</td>
						<td>4</td>
				</tr>
		</table>
</div>
</body>
</html>


Hi there, from what i’ve read if you use width : #px; it’s better then the min-width:#px; for tables. You should always attempt to use your first technique of width and height before min-width and min-height from what i’ve read.

Hi thanks so much for your input.

I am usually a strong css designer but I have had no reason to do much with tables until now and I am faced with the worst of the possible table uses - arranging products in an E-Commerce CMS. This means that different products will make the table cells different heights. This is normally ok but I am making mods to the products display which are knocking out the table row linearity so I am grateful for your input.
:slight_smile: