IE7: Why do unrelated cells change width when colspan'd cells contents grow wide?

First, please take a look at this fiddle in IE7. It's somewhat involved and not really worth duplicating here.

The desired behavior is that clicking the red block shows some additional details. The top row works as desired. The bottom row, in which the width of the details is greater, exhibits the behavior I'm trying to prevent.

Ideally I would like to know what's going on here but I'd settle for any answer which includes a work around that prevents the other row's column width from jumping around when the bottom row is expanded.

Testing Firefox reveals correct behavior in both cases: The bottom row details appear but no jumping occurs. I have no ability to test in IE8 or IE9, so I don't know whether it occurs for them as well.

So, what's going on here? Wh开发者_C百科y does this happen? How can I make it not jump?

The fiddle above shows my problem in its original context, but for additional narrowing here's a version without the javascript that tried to be more minimal. Note that removing the 25px margin from the innermost table simply hides the problem. Adding another set of cells will make it show again.

IE colspan bug? but not really a bug - it was reported IE6/7/8(b1) but deemed as invalid as there is no defined behaviour for how a browser should render colspan when table-layout: auto is implicitly defined.

Your workaround is to set the outermost table to be table-layout: fixed and set the "column widths" via your very first row (.report-header). So take the 25px width off the expand/expanable cell and make the .report-header row have the correct widths - you can have them default to auto if you don't want actual widths.

then you can put the nested table back to table-layout: auto explicitly if you want

so in essence here's code and I've put the same code into your fiddle, though I'm sorry if I lost some bits, I simplified it while testing.. if that doesn't work in IE7 now then let me know and I'll redo an entire fiddle..

Example fiddle

CSS:

table {
   border-collapse: collapse;
   table-layout: fixed;
   width: 100%;
}

table table {
   width: auto; 
   table-layout: auto;
}

table,tr,td {
    margin:0;
    padding:0;
}

table {border: 1px solid #f00;}
/* td {border: 1px solid #00f;} was used in testing */


td.expanded, td.expandable {
    background-color:#f00;
}

tr.report-header {
    font-weight:bold;
}

/* give first row their column widths here */
tr.report-header td {width: 25px;} /* col 1 */
tr.report-header td+td {width: auto;}
tr.report-header td+td+td+td+td+td {width: 50px;} /* col 6 example */
/* end first row widths */

td.detail table, td.detail td {border: 0;}
tr.detail {display:none;}
td.detail {padding-left: 30px;}