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 をはるかに超えてレンダリングされます。

注: テーブルの基礎となる可変幅レイアウトがあるため、テーブルに固定幅を使用することはできません。

3 行目は、オプションの 1 つが選択されるとすぐに (JavaScript を介して) 表示されるため、display:none に設定されています。この行が表示されるとすぐに、すべての列幅が完全に正しくなります。

他のコンテキストで colspan を使用する場合、col-width-definitions と IE で既に問題に直面しましたが、スパンされていないセルの幅が無視されるのはこれが初めてです。

  • この場合、IE 9/10 が単に私の colgroup 定義を無視するのはなぜですか?

  • テーブル構造を変更できない場合(つまり、これらの 3 つの列と列スパンが必要な場合) 、問題を解決するための提案はありますか?

どうもありがとう！

4

1 に答える 1