CSS 表の列幅を均等にする方法「table-layout:fixed」

表のセル幅は指定しないと自動調整されてしまう

ブログで4列の表を挿入したら、文字の長さによって列幅がバラバラになってしまった。

幅を均等にするために「width: 25%;」を設定してもうまく調整できない。おかしいなぁ。

そこで、「table-layout: fixed;」というワザを使ってみました。

/*--------------------------------
表の列幅を均等にする
---------------------------------*/
.table {
width: 400px; // 幅を指定
table-layout: fixed;
text-arign: center;
}

/*--------------------------------

表の列幅を均等にする

---------------------------------*/

.table {

width: 400px; // 幅を指定

table-layout: fixed;

text-arign: center;

}

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

表示はこんな感じ。

1	2	3	4
AAAAA	BB	CCC	DDDDDD

まとめて設定できて便利なので、ぜひ使ってみてください。

いちばんやさしいHTML5&CSS3の教本人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

posted with ヨメレバ

赤間公太郎,大屋慶太,服部雄樹インプレス 2016-03-18