システム開発ブログ/ 流通システム部　Yahoo!ブックマークに登録 Google ブックマーク はてなブックマーク Livedoorクリップ シェア

システム開発ブログ

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

最近の記事

カテゴリー

部署

月別アーカイブ

以前の部署別ブログ

検索

【HTML】Tableの幅を固定する

赤羽
赤羽 (2010年7月 6日 19:50)
流通システム部 / その他

みなさん、こんにちは。

先日、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を指定する。

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

「システム開発ブログ」へのコメントやご意見等ありましたら、 ファンページまでお願いします。  Facebook のファンページ

[PR]
他社のシステムも直します。資産を活かしてシステムリフォーム

システムのトラブル解決を承ります。すぐにシステムリフォームを体験できます
お問い合せ・情報はこちらの電話番号におかけください：03-3232-2525　お問合せ・資料請求はこちらをクリックしてください
ページのトップ
システム開発・一括受託開発。見積依頼受付中

システム開発専用サイト

システム開発の流れ・手順、実績など。アイロベックスのシステム開発を紹介。

VB .NETを主言語としたWebアプリケーションの開発

要件分析から保守まで、お客様の現場での問題解決だけでなく、IT経営の援護者としてトータルソリューションサービスを提供しています。

MovableType を使ったウェブサイト構築

魅力あるウェブサイトデザイン、構成はもとよりMovableTypeを使用したウェブサイトの作成、JAVA、CGIによる注文フォームの作成等、ビジネスを強力にサポートします。

フォルダーアクセス権限確認ツール『AD-Folder』

Windowsフォルダーアクセス権限確認ツール

フォルダーアクセス権限を一目で確認。使用版を無償でご利用いただけます。

スクール運営を応援する講座情報管理システム『CMS+AD for School』

Webとリアルをつなぐコンテンツマネージメントシステム

Webサイト・モバイルサイト・チラシ（PDF）・カタログ（InDesign）を、簡単かつ正確に作成できます。

「システム開発ブログ」の更新情報をTwitterで。

Twitter公式アカウントに認定されています

「システム開発ブログ」の更新情報をTwitterで。ぜひ、フォローをお願いします。