table タグの th や td の幅を設定しても効かない時の対処法

  • CSS
  • HTML

table (テーブル)タグの幅は初期値では自動調節になっていますが、一部のセルの幅を変更したいときに width を設定しているにも関わらずスタイルが当たらない時があります。

原因と解決策

(1)テーブル幅設定のプロパティtable-layoutを初期値(auto)に設定している

table-layout: auto;では、テーブルのセルの幅は自動調節されてしまいます。そのため、固定のレイアウトにするために値をfixedに変更します。これは table タグに設定してください。

table.layout-fixed {
    table-layout: fixed;
}

(2)table タグに width が設定されていない

(1)で固定レイアウトにしているにも関わらず、width で th や td の幅が設定できない時は、table がwidth: auto;になっているからかもしれません。table の幅を指定してあげます。

table.sample-table {
    width: 100%;
}

(3)table タグの display が table 以外になっている

これはレイアウト自体がかなり崩れた状態になっているはずなので、なかなかないとは思います。table タグにはデフォルトでdisplay: table;が指定してありますが、何らかの影響で block や flex など table 以外になっていると正しくテーブルレイアウトになってくれません。

display の指定を削除してデフォルトに戻すか、原因となっている箇所を修正しましょう。Javascript などで制御されていて分からない時は、仕方ありませんがdisplay: table !important;を付けるなどして対処します(解決方法としては最悪ですが…)。