Why does Internet Explorer 9/10 ignore column widths when using colspan?

问题

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!

回答1:

It seems that IE gets confused with the table structure when you have display: none on 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: none by visibility: 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.

来源：https://stackoverflow.com/questions/16177089/why-does-internet-explorer-9-10-ignore-column-widths-when-using-colspan

标签

html

internet-explorer

internet-explorer-9