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

Question

首先请看this fiddle在 IE7 中。它有些复杂，不值得在这里重复。

所需的行为是单击红色 block 显示一些额外的详细信息。顶行按需要工作。底行的细节宽度更大，展示了我试图阻止的行为。

理想情况下，我想知道这里发生了什么，但我愿意接受任何答案，其中包括一种变通方法，该变通方法可以防止其他行的列宽在底部行展开时跳来跳去。

测试 Firefox 揭示了两种情况下的正确行为:底部行的详细信息出现但没有发生跳转。我没有能力在IE8和IE9中测试，所以我不知道它们是否也会出现这种情况。

那么，这里发生了什么？为什么会这样？怎么让它不跳？

上面的 fiddle 在其原始上下文中显示了我的问题，但为了进一步缩小范围，这里是 a version没有试图变得更小的 javascript。请注意，从最里面的表格中删除 25px 的边距只会隐藏问题。添加另一组单元格将使其再次显示。

Answer 1

IE colspan 错误？但不是真正的错误 - 它被报告为 IE6/7/8(b1) 但被视为无效，因为当 table-layout: auto 被隐式定义时，浏览器应该如何呈现 colspan 没有定义的行为.

您的解决方法是将最外面的表格设置为 table-layout: fixed 并通过第一行 (.report-header) 设置“列宽” .因此，将 expand/expanable 单元格的宽度设为 25px，并使 .report-header 行具有正确的宽度 - 如果您不这样做，您可以将它们默认为自动想要实际宽度。

然后您可以根据需要将嵌套表格明确地放回table-layout: auto

所以本质上这是代码，我已经将相同的代码放入您的 fiddle 中，如果我丢失了一些位，我很抱歉，我在测试时对其进行了简化..如果现在在 IE7 中不起作用，那么让我知道了，我会重做整个 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;}