dlで表をつくる方法

| コメント(0)
110420.gif

上図のような表をdlで作成する場合、
今まではdt、ddにきっちりwidthを指定し、
それぞれにborder-bottomを指定。
dtにfloat:left;、ddにfloat:right;を指定するという方法でやっていました。
でも、「う」の段のように、ddのテキストの行数がdlよりも多いと
border-bottomがずれてしまいます。
ならborder-top指定すれば?と思いますが、
「え」の段のように、逆にdtのテキストの行数が多いと
「お」の段が回り込んでしまいます。
そうすると、一段ずつdlにするというような
何とも不細工なソースになってしまっていました。

調べてみると、下記の様にすればで崩れずソースもきれいなままです。
それは、dtにwidthとfloat:left;を指定border-bottomの指定はナシ。
ddには、dtのwidth分のpadding-leftとborder-bottomを指定、floatとwidthの指定はナシ。

具体的にはこんな感じです。

--------------

dl{
width:500px;
list-style:none;
border-top: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
background:url(dtについている色を画像で指定) repeat-y left top;
overflow:auto;
}

dt{
clear:both;
width:100px;
float:left;
}

dd{
border-bottom: 1px solid #999999;
padding:0 0 0 100px(dtのwidth分);
}

--------------

コメントする

このブログ記事について

このページは、gravity-worksが2011年4月20日 10:28に書いたブログ記事です。

ひとつ前のブログ記事は「リストなどで頭の1文字を前に出す方法」です。

次のブログ記事は「div内でfloatを使うときの注意点2」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。