dl,dt,ddタグでdtに対して、rowspan

質問

お世話になっております。
表題の通り、
dl,dt,ddタグでdtに対して、rowspanってできませんか？
cssは記述しておりませんが、
現在、テーブルのように２列並んだ状態です
イメージ（http://www.geocities.jp/eijispace/2011/0810.html）

<dl>
<dt>天気</dt>
<dd>晴れ</dd>
<dt>天気</dt>
<dd>曇り</dd>
<dt>天気</dt>
<dd>雨</dd>
</dl>

これを天気の部分は縦に一つに纏めて表示したいのです。

tableタグでも良いのですが、
レスポンシブ化を計っており、
ウインドウサイズが小さくなると、
一列に表示ということがしたく、

ウインドウサイズが小さくなると
jsか何かで、rowspanを0にする

という方法でも良いのですが、
jsは余り使わず、mediaクエリで何とかならないものか考えております。

ご教授お願いします

回答No.2

ORUKA1951 · ベストアンサー

ということは、端(ハナ)からデータ構造は
<dl>
　<dt>天気</dt>
　<dd>晴れ</dd>
　<dd>曇り</dd>
　<dd>雨</dd>
</dl>
ですよ。
<ul>
　<li>天気
　　<ol>
　　　<li>晴れ</li>
　　　<li>曇り</li>
　　　<li>雨</li>
　　</ol>
　</li>
</ol>
かもしれない。
　そもそも、最初に示された
<dl>
<dt>天気</dt>
<dd>晴れ</dd>
<dt>天気</dt>
<dd>曇り</dd>
<dt>天気</dt>
<dd>雨</dd>
</dl>
だと、３行目<dt>天気</dt>の以降の内容は、最初の<dt>の子供じゃないですから、そのようなデザインと整合性が取れません。

　まあ、方法はなくはありません。
以下は、本来の手法ではありません。
★タブは＿に置換してある。

<div class="section">
＿<h2>見出し</h2>
＿<p>・・・</p>
＿<dl>
＿＿<dt>天気</dt>
＿＿<dd>晴れ</dd>
＿＿<dt>天気</dt>
＿＿<dd>曇り</dd>
＿＿<dt>天気</dt>
＿＿<dd>雨</dd>
＿</dl>
</div>

div.section dl,div.section dl dt,div.section dl dd{
display:block;
margin:0;padding:0;
}
div.section dl{width:60%;margin:0 auto;position:relative;border:solid 1px black;
}
div.section dl dd{margin-left:61px;border-left:1px solid black;padding:0.5em 5px;}
div.section dl dt+dd+dt+dd{border-top:1px gray solid;line-height:1.6em;text-indent:1em;}
div.section dl dt{
position:absolute;
top:0;left:0;
width:40px;
height:100%;
border:none;
padding:0.5em 10px;
}
/* mediaquery以下を有効にする。 */
/*
div.section dl{padding-top:30px;}
div.section dl dd{margin-left:0;border-left-width:0;}
div.section dl dt{width:90%;height:14px;}
div.section dl dd{border-top:1px gray solid;}

リキッドなので、mediaqueryは必要ないかと・・・

補足

ORUKA1951さん、
本当にありがとうございます、
そもそものデータ構造が間違っていたっぽいです、、、

<dl>
　<dt>天気</dt>
　<dd>晴れ</dd>
　<dd>曇り</dd>
　<dd>雨</dd>
</dl>

で以下のイメージを作る場合のCSSを教えて欲しいです、、、
どうぞよろしくお願いします！

以下、イメージ（下記はwidth621px以上）
┌──┬──┐
│天気│晴れ│
│　　│ーー│
│　　│曇り│
│　　│ーー｜
｜　　｜あめ│
└──┴──┘
（下記はwidth620px以下）

┌─────┐
│　　天気　│
│ーーーーー│
│　　晴れ　│
│ーーーーー│
│　　曇り　│
│ーーーーー│
｜　　雨　　｜
└─────┘

回答No.3

ORUKA1951

＞で以下のイメージを作る場合のCSSを教えて欲しいです、、、
どうぞよろしくお願いします！
　そのままで良いですが、一部
div.section dl dd+dd{border-top:1px gray solid;line-height:1.6em;text-indent:1em;}
とするだけ。
　意味は自身で調べてください。
　そのほうが生きる!!
　⇒セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )

お礼

ご連絡遅くなって申し訳ございません！
大変参考になりました。
どうもありがとうございます

回答No.1

ORUKA1951

rowspanは、tableのコマ要素(TH,TD)の属性ですよ？
　表のコマ: TH要素とTD要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#adef-rowspan )

定義リストのDT,DDはセットではなく、THもTDも複数あっても構わないのです。単なるh1とp程度の関係です。よって、この二つは文書構造上一つのグループではありえませんから、DTとDDをひとつのグループとしての意味はありませんから、表現上も横に並べたり縦に並べたりは出来たらおかしい。
　HTMLとCSSの関係は、HTMLは文書構造をマークアップするもので、スタイルシートはその文書構造に基づいてデザインしていくものです。
　・・・・もっとも重要な基本的な部分です。「レスポンシブ化を計っており、」とそのためにHTMLを書くのでは断じてありません。!!

　お示しのリンク先--酷いですね。仕様書のどこにも「単に文書の整形のためにtableを使ってはならない」と書いてありますが、二次元(以上)のデータを示す表をtableとしてマークアップしてはならないとは、どこにも書いてない!!!。それどころか、tableを使うべきだとされている。
　そのサイトの一番の問題点!!!--デザインのためにHTML--マークアップしろと随所で言っている。それこそ最も避けなければならないことと徹底的に仕様書に書かれている悪例!!
　そもそも、あんな冗長なCSSになるのが分からない(^^)

＞これを天気の部分は縦に一つに纏めて表示したいのです。
　の意味が分からないのですが。
┌──┬──┐
│天気│晴れ│
│　　　│曇り│
│　　　│あめ│
└──┴──┘
としたいと言うことですか？

　マークアップしたいのは天気ではないと思います。具体的に項目と、その説明の内容をお示しください。

補足

ORUKA1951さん、
親切丁寧なご回答、どうもありがとうございます！

＞これを天気の部分は縦に一つに纏めて表示したいのです。
　の意味が分からないのですが。
ORUKA1951さんの例のとおりです！
以下、イメージ（下記はwidth621px以上）
┌──┬──┐
│天気│晴れ│
│　　│ーー│
│　　│曇り│
│　　│ーー｜
｜　　｜あめ│
└──┴──┘
（下記はwidth620px以下）

┌─────┐
│　　天気　│
│ーーーーー│
│　　晴れ　│
│ーーーーー│
│　　曇り　│
│ーーーーー│
｜　　雨　　｜
└─────┘

＞具体的に項目と、その説明の内容をお示しください。
項目を具体的に記載することは外注先にも影響しますので、
詳細は控え、イメージだけでお伝えしたいのですがよろしいでしょうか、、、