1. ホーム
  2. html

[解決済み] colspanが期待通りに適用されない理由

2022-02-18 11:18:19

質問

以下のような表があります。2行目には3つの列が定義されており、1つには colspan=8 で、その他は colspan=1 . それでも、セルはcolspanに従って引き伸ばされず、"width"は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>

何が問題で、どうすれば解決するのか?

どのように解決するのですか?

セルの幅は、セルの内容、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>

このように書き換えないと、あなたのテーブルはHTMLのテーブルモデルに違反していると思います。現在、3列目や4列目や...で始まるセルはありません。