[解決済み] 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 -> 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列目や...で始まるセルはありません。
関連
-
[解決済み] 名前が''の無効なフォームコントロールはフォーカスされない
-
[解決済み】iframeの高さを100%にする方法【重複】。
-
[解決済み] d3.tipが動作しないのはなぜですか?
-
[解決済み] 以下のHTMLフォームの例で、「mailto:[email protected]」とは何ですか?
-
[解決済み] ChromeのデベロッパーツールでHTML Bodyにcz-shortcut-listen="true "が表示される?
-
[解決済み] Bootstrapのカラム内で画像を中央に配置する方法 [重複]について
-
[解決済み] HTMLのバックスペース
-
[解決済み] セルフクローズスクリプトエレメントが機能しないのはなぜですか?
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか?
-
[解決済み】すべての列をコルスパンする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】HTML5検証エラー:body開始タグは見たが、同じタイプの要素がすでに開かれていた
-
[解決済み】iframeの背景色を変更する問題
-
[解決済み】フッターをページの下部に中央に配置するにはどうすればよいですか?
-
[解決済み】スタイルシートとして解釈されるリソースがMIMEタイプtext/htmlで転送される(ウェブサーバーとは関係ないようです)。
-
[解決済み】CSS "margin: 0 auto" が中央揃えにならない。
-
[解決済み] <html xmlns="http://www.w3.org/1999/xhtml">」は何をするのですか?
-
[解決済み] iFrameがURLを読み込んでいない
-
[解決済み] Favicon.icoを表示させることができません。
-
[解決済み] 順序なしリストが div 内で左いっぱいに整列されない
-
[解決済み] margin-block-startとmargin-topの違いは何ですか?