表(テーブル)のセルの幅を指定したにもかかわらず、意図した幅にならない - CSS

tableタグの表(テーブル)のセルの幅を指定したにもかかわらず、意図したセル幅にならない現象について紹介します。

概要

テーブルのセルの幅をスタイルシートで指定したにもかかわらず、意図したセル幅にならない場合があります。原因としてはいろいろありますが。 良くある理由に次のものが挙げられます。
  • テーブルの幅が足りない
  • 自動幅調節が有効なっている

テーブルの幅が足りない

4列のテーブルの場合、セル幅を200pxとした場合、200*4=800となり、テーブル幅が800px以上必要ですが、テーブル幅を800px以下に指定していると正しく表示されない場合があります。

自動幅調節が有効になっている

テーブルは標準でテーブルの列幅の自動幅調節をするようになっています。この機能が原因で意図したセル幅で表示できないことがあります。 この場合、テーブルのスタイルに以下のスタイルを追加すると解消される場合があります。
table-layout:fixed;

このページのキーワード
  • CSS
  • テーブル
  • セルの幅
  • 意図した幅にならない
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2021-08-25
作成日: 2010-03-17
iPentec all rights reserverd.