システム開発ブログ

流通システム部

その他

【HTML】Tableの幅を固定する

みなさん、こんにちは。

先日、HTMLのTableで思い通りに表示がされず、
少々悩んだことがありましたので、
今回はその解決方法を載せたいと思います。

まず、以下のようなTableがあったとします。

◇CSS

table{
	border:1px solid #666666;
	border-collapse:collapse;
}
td,th{
	border:1px solid #666666;
}

◇Table

部署 氏名
流通システム部流通システム部流通システム部 赤羽翼赤羽翼赤羽翼

このTableを以下の要件で改修します。

 1.Tableの幅は固定
 2.セルの内容は1行で表示させる
 3.表示しきれない分は切り落としてしまって構わない

まず、幅を固定化させるために、
Table、th、tdに対してwidthを指定します。
次に、内容によって幅が広がってしまうことを防ぐ為に、
Tableに対してtable-layout:fixedを指定します。

ここで問題となったのは、
1.の要件を満たそうとしたところ、
セルの内容が自動改行されてしまい、
2.の要件が満たせなくなってしまいました。

そこで、tdタグに対して改行を禁止させるnowrapを指定しましたが、
指定前と変化が無く、思ったようにいきませんでした。

Tableの幅固定について色々と調べ、試行錯誤した結果、
以下の方法で要件を満たすTableが作成出来ました。

◇CSS修正後

table{
	border:1px solid #666666;
	border-collapse:collapse;
	width:100px;
	table-layout:fixed;
}
td,th{
	border:1px solid #666666;
	width:50px;
}
.nowrap{
	white-space:nowrap;
	overflow:hidden;
}

◇Table修正後

部署 氏名
流通システム部流通システム部流通システム部
赤羽翼赤羽翼赤羽翼

セルの内容をdivタグで囲い、
改行を禁止させるnowrapと、
セルからはみ出た部分を非表示にするoverflow:hiddenをdivに対して指定することで、
1.~3.の要件を満たすTableとなりました。

はみ出た部分はdivにtitle要素を指定することで、
マウスポインタをセルの内容に移動させると、
ツールチップが表示され、全文が見られます。

解決方法をまとめますと以下の通りです。

 1.Tableの幅は固定
  →Table、th、tdにwidthを指定する。
   Tableにtable-layout:fixedを指定する。
 2.セルの内容は1行で表示させる
  →nowrapを指定する。
 3.表示しきれない分は切り落としてしまって構わない
  →overflow:hiddenを指定する。

そもそも、セルの内容が全て表示出来るくらいに
余裕のある幅を指定することが望ましいので、
今回のような要件はやや特殊であるかと思います。
ただし、それぞれの要件に対しての解決方法、
特に幅の固定はよくある要件かと思いますので、覚えておくと良いでしょう。

システム周りのお悩みを解決します

まずは無料ダウンロード

この記事に関連する記事の一覧


システム開発ブログ

Twitterでilovex_officialをフォローしてください

カテゴリー

以前の部署別ブログ

ページのトップ