新着記事一覧
タグ一覧
テーマ
ライト
ダーク
iPentec.com
/
Doc
/
CSS
目次
1
概要
2
テーブルの幅が足りない
3
自動幅調節が有効になっている
表(テーブル)のセルの幅を指定したにもかかわらず、意図した幅にならない - CSS
tableタグの表(テーブル)のセルの幅を指定したにもかかわらず、意図したセル幅にならない現象について紹介します。
概要
テーブルのセルの幅をスタイルシートで指定したにもかかわらず、意図したセル幅にならない場合があります。原因としてはいろいろありますが。 良くある理由に次のものが挙げられます。
テーブルの幅が足りない
自動幅調節が有効なっている
テーブルの幅が足りない
4列のテーブルの場合、セル幅を200pxとした場合、200*4=800となり、テーブル幅が800px以上必要ですが、テーブル幅を800px以下に指定していると正しく表示されない場合があります。
自動幅調節が有効になっている
テーブルは標準でテーブルの列幅の自動幅調節をするようになっています。この機能が原因で意図したセル幅で表示できないことがあります。 この場合、テーブルのスタイルに以下のスタイルを追加すると解消される場合があります。
table-layout:fixed;
このページのキーワード
CSS
テーブル
表
セルの幅
意図した幅にならない
著者
とりっち
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
関連するページ
隣接する要素のスタイルを設定する - 隣接セレクタの利用 - CSS内の"+"の意味が分からない
TableのCellSpacingをスタイルシートで変更する - CSSでテーブルの枠線を1重にする
TableのCellPaddingをスタイルシートで変更する
Google Chrome の複数行テキストボックスの行間が狭い
ボタンのフォーカス時の太線の外枠を表示しないようにする
スクロールに追従する枠を作成する - Sticky Position を利用したスクロール追従枠の作成
CSS Scroll Driven Animaion でスクロールに応じて右からスライドインするアニメーションを作成する
div枠全体をリンクする
最終更新日: 2021-08-25
作成日: 2010-03-17
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.