24

2行のテーブルがあります。最初の行には 3 つのセルしかありません。2 番目の行には 2 つのセルがあり、最初のセルにはセル全体を埋める必要がある別のテーブルが含まれています。

<table border="1" style="border-collapse:collapse;">
    <tr>
        <td style="WIDTH: 205px;">1</td> <!--This width doesn't apply in Chrome-->
        <td style="width:100%;">2</td>
        <td style="WIDTH: 5px;">3</td>
    </tr>                

    <tr>
        <td colspan="2">

                <TABLE width="100%" border="1" style="border-collapse:collapse;table-layout: fixed;">
                    <TR>
                        <TD style="width:130px;">
                            A</TD>
                        <TD style="width:90px;">
                            B</TD>
                        <TD style="width:230px;">
                           C</TD>
                    </TR>

                </TABLE>        
        </td>
        <td>
            D
        </td>
    </tr>
</table>

十分に簡単です、本当に....またはそう思いました。

IEで期待どおりに表示されます。しかし、Chrome は最初のセルの幅を正しく適用していないようです。下のセルの表が影響しているようです。

ここに画像の説明を入力

なぜこれが起こっているのですか?どうすればこれを回避できますか?

4

1 に答える 1

56

あなたがすべき2つのこと：

  • テーブル要素で、使用しますtable-layout: fixed;
  • 列を挿入して幅を設定する
    • (最初の行のテーブル ヘッダー/セルに幅を割り当てることもできます)

このような：

<table border="1" style="table-layout: fixed; width: 100%;">
    <colgroup>
        <col style="width: 205px;">
        <col style="width: auto;">
          <!-- Use "width: auto;" to apply the remaining (unused) space -->
        <col style="width: 5px">
    </colgroup>

    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr> 

    <!-- Etc. -->
于 2012-08-31T09:38:54.010 に答える