Ie8 Ignores Td Width, Works on Ie7

IE8 ignores td width, works on IE7

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>

Internet Explorer 8 table cell width bug with colspan set

Here is my result for failed td width in IE8:

<table style="width: 100%;" border="1">
  <tr>
    <td style="width:auto;">td1</td>
    <td style="width:15px;">td2</td>
    <td style="width:20px;">td3</td>
  </tr>
  <tr>
    <td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
  </tr>
</table>

<!-- IE8 HACK  100% WIDTH -->
<table style="width: 100%;" border="1">
  <tr>
    <td style="width:100%;">td1</td>
    <td style="width:15px;">td2</td>
    <td style="width:20px;">td3</td>
  </tr>
  <tr>
    <td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
  </tr>
</table>

internet explorer 8 ignores width for 'display: table-cell' element

After adding the bounty, I ended up working around this problem by targeting my CSS to IE8. I was already using Paul Irish's technique of adding classes to the <html> element using conditional comments:

<!--[if lt IE 7 ]> <html class="ie6 ielt9"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7 ielt9"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 ielt9"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->

So all I had to do is add an extra CSS rule for IE 8 and lower:

.img-container { display: table-cell; }   /* IE9+ and other browsers */
.ielt9 .img-container { display: block; } /* IE8 and lower */

Coupled with the techniques for vertically centring images, this gives me a nice cross-browser solution.

Why doesn't max-width work on tables in IE7?

The max-width property set for a table is ignored by WebKit browsers, both Chrome and Safari will render the table ignoring the max width as does IE7. I would recommend setting the max-width property to a wrapper element such as a div.

See http://jsfiddle.net/P5YPR/1/

IE 7/8 bug with fixed layout TABLE and TD width as percentage

Quote OP: "...which is the easiest (with less rewriting) or best (less ugly) way to make it work in both those ancient IEs and modern browsers?"

There is nothing tricky about the <table> element; it's just as ancient as the ancient IE's. If the table is exactly 1000 pixels wide, why are you using percentages for the columns? Just specify each column in pixels making sure the total of all columns adds up to 1000... there should then be no cross-browser conversion issues. This is both the easiest and best way.

EDIT:

The OP explicitly stated, "The table has 1000 pixels of width", however, based on recent comments, is now stating, "I cannot assume 1000px". I don't see how this changes anything. My answer works for any width.

IE cannot handle fractional percentages and seems to simply ignore anything after the decimal point. The simplest solution is to stick with whole number percentages or switch to pixels.

Internet Explorer 7 table with fixed layout problem

as per my answer here: Table with table-layout: fixed; and how to make one column wider

I did say that col elements would be a means to control the width of other columns too..

Your table is very precise, 1 x 100px wide column + (24 groups of 4) = 96 x 6px the total of this is, not including browser variations for rounding or borders is 676px.. you also made the padding in em's - but you have made the table 100% wide, for the browsers to know which of your columns to extend, and by how much, when table width is greater than those calculations as well as actually calculating and rounding a mixture of em and px, stably across browser is ermm asking a lot..

Using with the col element it is easier, and the table does indeed expand "in proportion" also it means the table will scroll rather than squash when the explicit width is wider than the window..

using the col method for column sizing means you do not set a size anywhere else. The Browser must hit those widths first, which is why they are at the top of the table, before it even has to start rendering the cells, and it mustn't then hit anything else which might throw it off count ;) (not easy in IE's case!)- and sorry but the catch is that even left/right padding on the cells will throw different browsers a loop - IE7 already needs a different cell width (I've put a hack in the CSS I think it's no more than browser rounding differences) and once padding is introduced it gets worse - I've added to my fiddle a compromise whereby only the first column has padding as the other text spanning the columns and being centered just might get off with not having any!

Working Example

in the jsfiddle, working in IE7, if you comment out the width of the master table you should see that the table becomes the proper dimension - the red bar underneath is the 676px guide I mention earlier) - but if you then narrow the window the table will squish, I don't know which behaviour you would want, I'm just pointing it out, you could of course go for the proper width and give the outer containing div a min-width so it never gets a chance to squish.. anyway..

(and sorry I took out the CSS this table didn't need to make it easier to read)

added:

**I'm aware that this is not working in webkit browsers, I'm looking into it..*

Update

Webkit browsers appear to have their own width calculation bug with colspan and because your table has no rows without a colspan somehwere the only solution I found was to add a blank row with 97 empty cells then hide the row, I put it first in source in a separate tbody ID to make it easy to hide and so the browsers hit that row first.. this helps the Webkit browsers as it can then use this row to calculate the individual cell widths before it has to go on and calculate a colspan.

The original jsfiddle has been updated, as this was the only change, no change to the method, for what it's worth I tried both the <col> width and <td> width method in Webkit but it suffered the wrong calculation of colspan no matter which way it was done..

Ie8 Ignores Td Width, Works on Ie7