IE7：当 colspan 的单元格内容变宽时，为什么不相关的单元格会改变宽度？

Question

首先，请看一下IE7中的this fiddle。它有点涉及，不值得在这里复制。

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

理想情况下，我想知道这里发生了什么，但我会接受任何答案，其中包括解决方法，以防止在底部行展开时另一行的列宽跳动。

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

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

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

Answer 1

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

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

那么你可以根据需要将嵌套表显式放回table-layout: auto

所以本质上是这里的代码，我已经将相同的代码放入您的小提琴中，但如果我丢失了一些位，我很抱歉，我在测试时对其进行了简化.. 如果现在在 IE7 中不起作用，那么让我知道了，我会重做一个完整的小提琴..

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;}