solution
<!DOCTYPE html> should be present at the top of the page to indicate to browsers that the page should be rendered in standard mode.
Internet Explorer 8+ includes a compatibility view setting which will render pages as they would appear in IE 7. By default, all intranet zoned sites are set to render in compatibility mode, which produces the issue outlined below. To force a page to never render in compatibility mode, this meta tag can be added to the <head> section of the page.
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7;" />
In my case I’m using ASP.NET so for convenience I added the above as a custom header to cause all pages in my site to render in standard mode.
Original post
First off, I’m working in an environment that uses IE 8 exclusively, so I don’t need a solution that’s compatible on all browsers – just IE.
I have a page that displays a table with width=100%, and each cell except those in the last column set to a specific width (in this case 200px). When rendered in IE it works as intended. That is, I get 3x columns which are 200px wide, and the 4th column takes up whatever room is left over (subject to user’s screen resolution/window size).
However if I add an additional row to the table, and have this bottom row span across all columns, Internet Explorer 8 and 9 completely disregards the specified column widths depending on the width of the text in this bottom row. This behaviour is even more unusual when I incorporate text-align:right into the columns in the first row. When I do this, IE aligns the text according to the width that the columns should be, while inserting unusable space between the columns. This is best illustrated with a screenshot.
This shows the table being rendered correctly in Opera 12 but not in IE 8 or 9. Here’s the HTML I used to illustrate the problem:
<html>
<head>
<style>
td{
background-color:#AAAAAA;
}
.s1{
text-align:right;
width:200px;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<td class="s1">Col 1 a a a a a a a a a</td>
<td class="s1">Col 2 a a a a a a a a a</td>
<td class="s1">Col 3 a a a a a a a a a</td>
<td>Col 4</td>
</tr>
<tr>
<td class="s1">Col 1 a a a a a a v vv vv v v v</td>
<td class="s1">Col 2 a a a a a a v vv vv v v v</td>
<td class="s1">Col 3 a a a a a a v vv vv v v v</td>
<td>Col 4</td>
</tr>
<tr>
<td colspan="4">This text causes the table columns to expand xxxxxxx xxxxxxx xxxxxxxx xxxxxx aaaaaaa aaaaa aaaaaa aaaaaaaa aaaaa xxxxxxx xxxxxxx xxxxxxxx
xxxxxx aaaaaaa aaaaa aaaaaa aaaaaaaa aaaaa xxxxxxx xxxxxxx xxxxxxxx xxxxxx aaaaaaa aaaaa aaaaaa aaaaaaaa aaaaa xxxxxxx xxxxxxx xxxxxxxx xxxxxx aaaaaaa aaaaa aaaaaa
aaaaaaaa aaaaa</td>
</tr>
</table>
</body>
</html>
So my question is, what do I need to change to get this to render the same in IE as it does in Opera? I want the table to size dynamically while fixing the columns that I specify to a certain width.
You didn’t specify a doctype wich makes IE go into quirks mode.
So put this at the top of your page: