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

Question

I guess the following code shall explain the problem. 我猜下面的代码可以解释这个问题。

<!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>

The problem: The first colum is rendered much larger than 22px. 问题：第一个列的渲染远大于22px。

Note: I cannot use a fixed width for the table, because there's a variable-width-layout underlying the table. 注意：我不能为表使用固定宽度，因为在表的下面有一个可变宽度的布局。

The third row is set display:none because it shall be shown (via JavaScript) as soon as one of the options is chosen. 第三行设置为display：none，因为一旦选择了其中一个选项，就应立即显示（通过JavaScript）。 As soon as this row is shown, all the col-widths are perfectly correct. 一旦显示此行，所有col-widths都是正确的。

I already faced problems with col-width-definitions and IE when using colspan in other contexts - however this is the first time, that the width for a non-spanned cell is ignored. 在其他情况下使用colspan时，我已经遇到了col-width-definitions和IE的问题-但这是第一次，非跨度单元格的宽度被忽略。

Why does IE 9/10 simply ignore my colgroup definitions in this case? 在这种情况下，为什么IE 9/10只会忽略我的colgroup定义？
Any suggestions to solve the problem if I cannot change the table structure (ie, I need these three colums and the colspans)? 如果无法更改表结构（例如，我需要这三个列和colspans）， 是否有解决该问题的建议？

Thanks a lot! 非常感谢！

Answer 1

It seems that IE gets confused with the table structure when you have display: none on the last row. 似乎在显示时IE与表结构混淆了display: none在最后一行display: none 。 If you remove that setting, the widths change. 如果删除该设置，则宽度会改变。 Without that row, the table violates the HTML table model (as the validator reports, if you actually remove the row from the markup and tell the validator to do HTML5 validation, where table model errors are detected). 没有该行，该表将违反HTML表模型（如验证器报告的，如果您实际上从标记中删除了该行并告诉验证器进行HTML5验证，则将在其中检测到表模型错误）。

Things change if you replace display: none by visibility: collapse , though that setting is not supported by some old versions of IE. 如果您替换display: none则事情发生了变化display: none visibility: collapse ，尽管某些旧版本的IE不支持该设置。

Foremost, I think the table structure should be correct when visible rows only are counted. 首先，我认为仅计算可见行时表结构应该正确。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-04-23 19:58:36

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-04-23 19:58:36

解决方案1
1 已采纳 2013-04-23 19:58:36