[意外と知らないCSS]テーブルの列幅を均等にするtable-layout:fixed

  • あとで読みたい人は…

去年花粉症デビューした、@cappeeです。

いつまで続くかわからない意外と知らないCSSシリーズ第1弾です。

テーブルの列幅を均等にするtable-layout:fixed

デフォルトだと自動レイアウトになっているため、セル内の文字数などによって自動的に列幅が調整されてしまいますが、table-layout:fixed を指定すると列幅を固定して均等にすることができます。

table-layout の説明

table-layout:fixed;
テーブルの列幅を固定レイアウトにして均等にします。

table-layout:  auto;
デフォルトの値です。自動レイアウトでセルの内容によって列幅が調整されます。

table-layout:fixed の記述例

table {
width: 100%;
table-layout: fixed;
}

tableセレクタには横幅の指定が必要です。

table-layout:fixed の表示

見出しあ 見出しい 見出しう
あああ いいいいい
あああああああ いいい うう

table-layout:fixed を指定すればセル内の文章量に差があっても列幅を均等に表示してくれますので、列ごとに横幅を指定する手間が省けます。デザインに合わせて活用したいですね。

 

Pocket
article clipper [意外と知らないCSS]テーブルの列幅を均等にするtable layout:fixed

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)