IE8 ignores td width, works on IE7

问题:

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?

回答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>

回答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">

回答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.

回答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.