为什么 Internet Explorer 9/10 在使用 colspan 时会忽略列宽？答案

【问题标题】：Why does Internet Explorer 9/10 ignore column widths when using colspan?为什么 Internet Explorer 9/10 在使用 colspan 时会忽略列宽？
【发布时间】：2013-04-17 02:59:22
【问题描述】：

我想下面的代码应该可以解释这个问题。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
body { padding-bottom: 24px }
table { table-layout: fixed }
</style>
</head>
<body>

<table class="question" id="TR09_tab" border="0" cellpadding="0" cellspacing="0" width="100%">
<colgroup>
  <col width="22">
  <col width="110">
  <col>
</colgroup>
<tr>
  <td><input name="one" id="one" value="yes" type="checkbox"></td>
  <td colspan="2"><label for="one">Option 1</label></td>
</tr>
<tr>
  <td><input name="two" id="two" value="yes" type="checkbox"></td>
  <td colspan="2"><label for="two">Option 2</label></td>
</tr>
<tr style="display: none">
  <td colspan="2"><label for="text">Text:</label></td>
  <td><input name="text" id="text" type="text" value="" style="width: 98%"></td>
</tr>
</table>

</body>
</html>

问题：第一列的渲染比 22px 大很多。

注意：我不能为表格使用固定宽度，因为表格下面有一个可变宽度布局。

第三行设置为 display:none，因为一旦选择了其中一个选项，它就会显示（通过 JavaScript）。一旦显示这一行，所有的列宽都完全正确。

在其他上下文中使用 colspan 时，我已经遇到了 col-width-definitions 和 IE 的问题 - 但这是第一次忽略非跨区单元格的宽度。

在这种情况下，为什么 IE 9/10 会简单地忽略我的 colgroup 定义？
任何解决问题的建议如果我无法更改表结构（即，我需要这三个列和 colspan）？

非常感谢！

【问题讨论】：

stackoverflow.com/questions/13522196/…
即使我删除了最后一行，W3C 验证器也不会报告任何错误。此外，另一篇文章中的代码没有定义任何列宽。我可能只是瞎了眼，但我不明白这一点？！

标签： html internet-explorer internet-explorer-9

【解决方案1】：

当您在最后一行有display: none 时，IE 似乎与表结构混淆了。如果删除该设置，宽度会发生变化。如果没有该行，则该表违反了 HTML 表模型（如验证器报告的那样，如果您实际上从标记中删除该行并告诉验证器进行 HTML5 验证，其中检测到表模型错误）。

如果您将 display: none 替换为 visibility: collapse，情况会发生变化，尽管某些旧版本的 IE 不支持该设置。

首先，我认为只计算可见行时，表结构应该是正确的。

【讨论】：

再次，我在validator.w3.org/#validate_by_input 测试了代码没有最后一行，它给了我一个“有效”（尽管缺少字符编码有两个警告）。无论如何，感谢您对“可见性”的提示-这立即解决了问题:)
抱歉，我忘了说验证器会报告问题如果在 HTML5 模式下。 HTML 表格模型要求不能用 DTD 表示，因此它们仅在 HTML5 验证中报告。我将编辑我的答案。