IE8 ignores td width, works on IE7

Question

There is a table looking like this:

<table width="100%">
<tr id="header">
 <td colspan="2"></td>
</tr>
<tr id="center">
 <td id="left" style="width: 201px"></td>
 <td id="mainpage" style="width: 100%"></td>
</tr>
</table>

In every browser (including IE7) apart from IE8 the "left" td is fine. In IE8 it exceeds the width according to the mainpage's content.

I'd post some screenshots but it's my first post here.

Any ideas whatsoever?

Answer 1

That width: 100% on the second column doesn't look right - if you're trying to make the second column expand to the rest of the available space, you shouldn't need that at all, so you can remove it. Also, add this to your table:

table-layout: fixed;

to make sure that the widths are obeyed.

complete code:

<table style="width: 100%; table-layout: fixed;">
<colgroup>
    <col style="width: 201px">
</colgroup>
<tr id="header">
    <td colspan="2"></td>
</tr>
<tr id="center">
    <td id="left"></td>
    <td id="mainpage"></td>
</tr>
</table>

Answer 2

Are you sure it should be 100%

<table width="100%">

The table will be as large as its parent element. May be you should set a fixed width for the table:

<table width="600">

Answer 3

If you define a width to your table and to your first you don't need to define it for your second .

I guess the second gets 100% from container which is the table.

Answer 4

Well, problem somewhat fixed by adding an empty table with a fixed width inside the mainpage .

That way I'm actually setting a min-width to the regardless IE's ignoring attitude. Thanks for all the answers.