How can I convince IE to honor my explicit instructions to make a table column X pixels wide? [migrated]
- by AnthonyWJones
Please consider this small but complete chunk of HTML:
<!DOCTYPE html >
<html>
<head>
<title>Test</title>
<style type="text/css">
span {overflow:hidden; white-space:nowrap; }
td {overflow:hidden; text-overflow:ellipsis}
</style>
</head>
<body>
<table cellspacing="0" >
<tbody>
<tr>
<td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap; "><span>column 1</span></td>
<td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap; "><span>column 2</span></td>
<td nowrap="nowrap" style="max-width:30px; width:30px; white-space:nowrap; "><span>column 3</span></td>
</tr>
</tbody>
</table>
</body>
</html>
If you render the above in Chrome you'll see the effect I'm looking for.
However render it in IE8 or 9 the width and/or max-width is ignored.
So my question is how do get IE to simply let me specify the width of a cell explicitly?
BTW, I've tried various combinations of table-layout:fixed and using colgroup with cols and all sorts, nothing I've tried convinces IE to what I'm clearly asking it to explicitly do?
If I had any hair before starting this I wouldn't have any left by now.
