☰

colspanが期待どおりに適用されないのはなぜですか？質問する

tag-icon • tag-icon html web html-table
colspanが期待どおりに適用されないのはなぜですか？質問する

以下のような表があります。2 行目には 3 つの列が定義されており、1 つはcolspan=8、その他は ですcolspan=1。それでも、セルは colspan に応じて拡張されず、2 番目のセルの「幅」が少し広くなり、3 番目のセルの幅が最も広くなります。

<table class="floating simpletable">
    <tbody>
        <tr><td colspan="10">1st row</td></tr>
        <tr><td colspan="8">Column 1 -&gt; Least wide</td><td colspan="1">2nd</td><td colspan="1">3rd</td></tr>
        <tr><td colspan="10">3rd row</td></tr>
        <tr><td colspan="1">1st cell</td><td colspan="9">4th row</td></tr>
    </tbody>
</table>

問題は何ですか？また、それをどのように解決しますか？

ベストアンサー1

セルの幅は、セルの内容、幅に関する HTML および CSS 設定、ブラウザ、場合によっては月の満ち欠けによって決まります。このcolspan属性は、セルが占める列数 (つまり、テーブルのグリッド内のスロット数) を指定するだけです。

2 行目の最後のセルが最も幅が広い場合、その理由はおそらく、そのセルに最も多くのコンテンツが含まれている (または幅の設定がある) ためです。デモ コードでは、このような動作は示されていません。

列幅をセルのサイズ要件に合わせて調整したくない場合は、CSS (または HTML) で幅を明示的に設定します。その前に、テーブル構造から不要な複雑さをすべて取り除くことをお勧めします。デモ コードが構造全体を反映している場合、列 2 から 8 は不要な分割です。つまり、1 つの列にすることができます。デモ (明確さのためにピクセル幅を低スタイルで表示):

<table class="floating simpletable" border>
    <col width=100><col width=100><col width=100>
    <tbody>
        <tr><td colspan="4">1st row</td></tr>
        <tr><td colspan="2">span 1</td><td>span 2</td><td>span 3 </td></tr>
        <tr><td colspan="4">3rd row</td></tr>
        <tr><td>span</td><td colspan="3">other span</td></tr>
    </tbody>
</table>

このように書き直さないと、現在列 3 または列 4 から始まるセルがないため、テーブルが HTML のテーブル モデルに違反することになります。

おすすめ記事