web-dev-qa-db-ja.com

Chromeで表のセル幅が間違っているのはなぜですか？

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は、最初のセルの幅を正しく適用しないようです。下のセルの表の影響を受けるようです。

enter image description here

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

htmlgoogle-chromelayoutwidthhtml-table
23
Urbycoz

あなたがすべき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. -->
51
Richard de Wit