为什么在使用colspan时Internet Explorer 9/10会忽略列宽？ [英] Why does Internet Explorer 9/10 ignore column widths when using colspan?
问题描述
<！DOCTYPE HTML PUBLIC - // W3C // // DTD HTML 4.01 Transitional // ENhttp://www.w3.org/TR/html4/loose.dtd\">
< html>
< head>
< title>测试< /标题>
< style type =text / css>
body {padding-bottom：24px}
table {table-layout：fixed}
< / style>
< / head>
< body>
< table class =questionid =TR09_tabborder =0cellpadding =0cellspacing =0width =100％>
< colgroup>
< col width =22>
< col width =110>
< col>
< / colgroup>
< tr>
< td>< input name =oneid =onevalue =yestype =checkbox>< / td>
< td colspan =2>< label for =one>选项1< / label>< / td>
< / tr>
< tr>
< td>< input name =twoid =twovalue =yestype =checkbox>< / td>
< td colspan =2>< label for =two>选项2< / label>< / td>
< / tr>
< tr style =display：none>
< td colspan =2>< label for =text>文字：< / label>< / td>
< td>< input name =textid =texttype =textvalue =style =width：98％>< / td>
< / tr>
< / table>
< / body>
< / html>
问题：第一个列显示比22px大很多。
注意：我不能为表使用固定宽度，因为表中有一个可变宽度布局。
第三行是设置显示：无，因为只要选择其中一个选项，它就会显示（通过JavaScript）。只要显示此行，所有列宽都完全正确。
在其他情况下使用colspan时，我已经遇到col-width-definitions和IE的问题 - 但是这是第一次，非跨网格的宽度被忽略。
-
为什么IE 9 /在这种情况下，10简单地忽略我的colgroup定义？
-
解决问题的任何建议 if 我无法更改表
结构（即我需要这三个colums和colspans）？
非常感谢！
解决方案当你有
display：none时，IE似乎会与表结构混淆。在最后一行。如果删除该设置，则宽度会改变。如果没有该行，该表就会违反HTML表格模型（如验证器报告，如果您实际上从标记中删除了该行并告诉验证程序进行HTML5验证，那么检测到表模型错误）。
如果您用
visibility：collapse取代display：none，一些老版本的IE不支持。
首先，我认为只有当可视行数被计算时，表结构应该是正确的。
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.
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. As soon as this row is shown, all the col-widths are perfectly correct.
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.
Why does IE 9/10 simply ignore my colgroup definitions in this case?
Any suggestions to solve the problem if I cannot change the table structure (i.e., I need these three colums and the colspans)?
Thanks a lot!
解决方案It seems that IE gets confused with the table structure when you have
display: noneon the last row. 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).Things change if you replace
display: nonebyvisibility: collapse, though that setting is not supported by some old versions of IE.Foremost, I think the table structure should be correct when visible rows only are counted.
这篇关于为什么在使用colspan时Internet Explorer 9/10会忽略列宽？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
