0

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

<!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）。一旦显示此行，所有 col-width 都是完全正确的。

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

  • 为什么 IE 9/10 在这种情况下会简单地忽略我的 colgroup 定义？

  • 如果我无法更改表结构（即，我需要这三个列和 colspan），有什么建议可以解决这个问题？

非常感谢！

4

1 回答 1

1

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

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

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

于 2013-04-23T19:58:36.483 回答