0

以下のコードを使用してHTMLテーブル（4.01 Transitional）を作成しようとしています。WindowsのChromeを使用すると予想どおりにレンダリングされますが、Ubuntuで提供されるFirefox17.0.1では予期しない方法でレンダリングされます。Ubuntuでは、2行目と3行目の最初の列は同じ幅です。また、3行目の2列目は、2行目の最後の3列と同じ幅です。より多くのブラウザと互換性のあることができることはありますか？

<table width="500">
    <tr>
        <td align="center" colspan="5" width="500">5 wide</td>
    </tr>
    <tr>
        <td align="center" colspan="2" width="200">2 wide</td>
        <td align="center" colspan="1" width="100">1 wide</td>
        <td align="center" colspan="1" width="100">1 wide</td>
        <td align="center" colspan="1" width="100">1 wide</td>
    </tr>
    <tr>
        <td align="center" colspan="1" width="100">1 wide</td>
        <td align="center" colspan="4" width="400">4 wide</td>
    </tr>
</table>

編集を開始

それが最善の方法かどうかはわかりませんが<colgroup>、<col>要素を含むブラウザ間で一貫した動作を実現しました。 

<table width="500">
    <colgroup>
        <col width="25" />
        <col width="75" />
        <col width="200" />
        <col width="100" />
        <col width="100" />
    </colgroup>
    <tr>
        <td align="center" colspan="5">5 wide</td>
    </tr>
    <tr>
        <td align="center" colspan="2">2 wide</td>
        <td align="center" colspan="1">1 wide</td>
        <td align="center" colspan="1">1 wide</td>
        <td align="center" colspan="1">1 wide</td>
    </tr>
    <tr>
        <td align="center" colspan="1">1 wide</td>
        <td align="center" colspan="4">4 wide</td>
    </tr>
</table>
4

1 に答える 1

1

最も簡単な解決策は、マークアップを追加することです

<col><col><col><col><col>

<table>タグとCSSルールの直後

col { width: 100px }

現在使用されているテーブルマークアップは、少なくともHTML5ドラフトで定義され、一部のブラウザで解釈されているように、HTMLテーブルモデルに違反しています。HTML5モードでW3CMarkupValidatorを使用してマークアップをチェックすると、（表示属性に関するメッセージに加えて）「要素tdによって確立されたテーブル列5の先頭にセルがありません」というエラーメッセージが表示されます。本当の問題は、むしろ、あなたが意図しているように、列2から始まるセルがないということです。

セル幅を100ピクセルに設定して、を追加する<tr><td><td><td><td><td></tr>と、問題が何であるかがわかります。ただし、このようなダミー行を使用すると、通常、レイアウトが乱れます。したがって、col要素を使用して列構造を指定することをお勧めします。

于 2012-12-31T07:09:39.730 に答える