CODEWITHSUNDEEP
htmlcssinternet-explorerfirefoxcross-browser
Gene Vincent
Gene Vincent

Reputation: 5469

Setting width of table cells with CSS

I have a HTML table where I must set the overall width and want to make sure the label column doesn't get too wide.

It works as expected in Firefox 4, but IE 9 seems to completely ignore the with property.

<html>
<head>
<style type="text/css">
table,th,td { border: solid 1px; border-collapse: collapse; }
th.caption { width: 700px; }
.label { width: 100px; }
</style>
</head>
<body>

<table>
<tr><th class="caption" colspan=2>Caption</th></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
</table>

</body>
</html>

Upvotes: 0

Views: 1412

Answers (1)

thirtydot
thirtydot

Reputation: 228162

  • Add <!DOCTYPE html> as the very first line to get Standards Mode (not directly related to your problem, but you should definitely do it unless you like IE9 pretending to be IE5 - Quirks Mode).
  • Set the overall width of the table on table instead of th.caption.

See: http://jsbin.com/icafo3

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table,th,td { border: solid 1px; border-collapse: collapse; }
table { width: 700px; }
.label { width: 100px; }
</style>
</head>
<body>

<table>
<tr><th class="caption" colspan=2>Caption</th></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
</table>

</body>
</html>

Upvotes: 4

Related Questions