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>