テーブルタグの代用をスタイルシートで実現するときのテクニックを出来るだけたくさんのレパートリーで紹介してください。

ぱっと思い浮かんだのは下記のような方法です。
<span style =”width:10em;border-style:solid;border-width:1px 1px 1px 1px;”>左上</span><span style =”width:10em;border-style:solid;border-width:1px 1px 1px 0px;”>右上</span><br />
<span style =”width:10em;border-style:solid;border-width:0px 1px 1px 1px;”>右下</span><span style =”width:10em;border-style:solid;border-width:0px 1px 1px 0px;”>右下</span><br />
しかし、
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
が存在するときちんと表示されません・・・(Widthの設定がうまくいかない)

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2004/10/21 15:41:03
  • 終了:--

回答(3件)

id:sasada No.1

sasada回答回数1482ベストアンサー獲得回数1332004/10/21 17:33:02

ポイント24pt

 cssのdisplayプロパティを使用すれば、div等の任意の要素でもtableモドキが作れることになってます。

 ・・・仕様上は。

 IEでマトモに対応していないのが残念ですが、レパートリーのひとつに加えていただけると嬉しいです。f(^^;。

id:sls

ありがとうございます。

そうなんですがー。しりませんでした。

さっそくためしてみます。

2004/10/21 18:34:22
id:kahusi No.2

かふし回答回数6ベストアンサー獲得回数02004/10/21 18:22:11

ポイント23pt

質問文にある例ですが、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>

id:sls

>質問文にある例ですが、widthプロパティはインライン要素には適用出来ないので、「きちんと表示されない」挙動が正しいのです。

そうでした!ありがとうございます。

また、頂いたコードの方も勉強になりました。

2004/10/25 10:09:00
id:dim No.3

dim回答回数178ベストアンサー獲得回数02004/10/24 21:14:46

ポイント23pt

http://www.motchie.com/article/multicolumn.html

スタイルシートでマルチカラム・デザインを実現する方法

左上右上

右下右下

 上はこちらの環境で表示された結果です。枠線が入っていますけれども。この表示結果に問題があるということでしょうか?

 この方法で幅を決定していきたいということであれば、widthをpaddingに変更すれば問題ないと思われます。

 マルチカラムデザインと呼ばれる、cssでtableデザインを実現するということであるのならば・・・。

 sasadaさんが指摘された、cssでtableデザインを実現する方法について記載されているページを3つ、実現の面で参考になりそうなページを1つ、それぞれ出しておきます。

id:sls

ありがとうございます。

2004/10/25 10:09:47

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません