Question

首先，请查看IE7中的this fiddle。它有点牵扯，并不值得在这里重复。

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

理想情况下，我想知道这里发生了什么，但我会满足于任何一个包含一个解决方案的答案，以防止另一行的列宽在底部行扩展时跳转。

测试Firefox在两种情况下都会显示正确的行为：显示底行详细信息，但不会跳转。我无法在IE8或IE9中进行测试，所以我不知道它是否也适用于它们。

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

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

Answer 1

IE colspan bug？但实际上并不是一个错误 - 它被报告为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;}

IE7：当colspan'd细胞内容物变宽时，为什么不相关的细胞会改变宽度？

1 个答案:

Example fiddle