http://msugai.fc2web.com/web/CSS/table.html
CSS 概説 | テーブル
cssのdisplayプロパティを使用すれば、div等の任意の要素でもtableモドキが作れることになってます。
・・・仕様上は。
IEでマトモに対応していないのが残念ですが、レパートリーのひとつに加えていただけると嬉しいです。f(^^;。
ありがとうございます。
そうなんですがー。しりませんでした。
さっそくためしてみます。
質問文にある例ですが、widthプロパティはインライン要素には適用出来ないので、「きちんと表示されない」挙動が正しいのです。
さて、代用例ですが。
1. displayプロパティのtable関連の値を利用する(URI参照)
2. floatを使つた段組
3. position等を使つた段組
が挙げられるでせうか。
取敢ず、2と3の例を下に記します。
<h2>floatを使つた段組</h2>
<div>
<div style=”width:5em;border:#666 1px solid;float:left;”>div要素</div>
<div style=”width:5em;border:#666 1px solid;float:left;margin-left:0.5em;”>div要素</div>
</div>
<div style=”clear:both;”>
<div style=”width:5em;border:#666 1px solid;float:left;”>div要素</div>
<div style=”width:5em;border:#666 1px solid;float:left;margin-left:0.5em;”>div要素</div>
</div>
<hr style=”clear:both;”><!-- 段組解除する際は何らかの要素でclearプロパティを指定する必要あり -->
<h2>position等を使つた段組</h2>
<div style=”position:relative;”>
<div style=”width:5em;border:#666 1px solid;display:block;position:absolute;top:0;left:0;”>div要素</div>
<div style=”width:5em;border:#666 1px solid;display:block;position:absolute;top:0;left:5.5em;”>div要素</div>
<div style=”width:5em;border:#666 1px solid;display:block;position:absolute;top:1.5em;left:0;”>div要素</div>
<div style=”width:5em;border:#666 1px solid;display:block;position:absolute;top:1.5em;left:5.5em;”>div要素</div>
</div>
>質問文にある例ですが、widthプロパティはインライン要素には適用出来ないので、「きちんと表示されない」挙動が正しいのです。
そうでした!ありがとうございます。
また、頂いたコードの方も勉強になりました。
http://www.motchie.com/article/multicolumn.html
スタイルシートでマルチカラム・デザインを実現する方法
左上右上
右下右下
上はこちらの環境で表示された結果です。枠線が入っていますけれども。この表示結果に問題があるということでしょうか?
この方法で幅を決定していきたいということであれば、widthをpaddingに変更すれば問題ないと思われます。
マルチカラムデザインと呼ばれる、cssでtableデザインを実現するということであるのならば・・・。
sasadaさんが指摘された、cssでtableデザインを実現する方法について記載されているページを3つ、実現の面で参考になりそうなページを1つ、それぞれ出しておきます。
http://www.fromdfj.net/html/column.html
fromdfj.net
http://www6.plala.or.jp/go_west/nextcss/
CSS Dencitie
ありがとうございます。