fieldset をテーブルのような見た目にしたい

###前提・実現したいこと
fieldset をテーブルのような見た目にしたいです。

DTD HTML 4.01 Transitional
chrome, Firefox, IE9 以上にて
できれば javascript を使わないで

fieldset, legend 要素等はdisplay プロパティを受け付けない仕様なのでしょうか？
W3C の原文該当箇所や参考ページありましたらリンクも教えていただけると助かります。
よろしくお願いします。

###該当のソースコード
![(chrome での表示)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//ja">
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>legend要素のコントロール</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		.table {
			display: table;
			border: 1px solid #000;
		}
		fieldset {
			display: table-row;
			border: none;
		}
		legend {
			display: table-cell;
			border: 1px solid #000
		}
		.inputs {
			display: table-cell;
			border: 1px solid #000;
		}
		.inputChild {
			display: block;
		}
	</style>
</head>
<body>
	<h1>git test</h1>
<div class="table">
	<fieldset>
		<legend>legend</legend>
		<span class="inputs">
			<span class="inputChild"><input type="radio" name="legend">a</span>
			<span class="inputChild"><input type="radio" name="legend">b</span>
		</span>
	</fieldset>
</div>
</body>
</html>

###試したこと
上記のように legend を display: table-cell にするのが王道かと思い試してみましたが chrome, Firefox では改行されて表示されてしまいました。
float プロパティを使用すれば横並びにはできましたが legend と .inputs の高さを揃えるのに js 等が必要になります。

行動規範の内容に同意します

回答1件

ベストアンサー

開発ツールで確認したところ、CSS設定は適用されていましたが、
legend要素とspan要素という異なる要素をtable-cellで横並びにしようとしていたことに無理があるようでした。
divで並べるようにします。legend要素をdivで囲い、spanの方も横並びに使う外側はdivに置き換えます。

また、チェック要素はspanではなく、labelで囲うようにすると、文字をクリックした場合でもチェックできるようになります。

html
1<h1>git test</h1>
2<div class="table">
3  <fieldset>
4    <div class="formHead">
5      <legend>legend</legend>
6    </div>
7    <div class="inputs">
8      <label class="inputChild"><input type="radio" name="legend">a</label>
9      <label class="inputChild"><input type="radio" name="legend">b</label>
10    </div>
11  </fieldset>
12</div>

css
1 * {
2   padding: 0;
3   margin: 0;
4 }
5 
6 .table {
7   display: table;
8   border: 1px solid #000;
9 }
10 
11 fieldset {
12   display: table-row;
13   border: none;
14 }
15 
16 .formHead,
17 .inputs {
18   display: table-cell;
19   border: 1px solid #000;
20 }
21 
22 .formHead {
23   min-width: 200px; /* 任意の横幅 */
24 }
25 
26 .inputs {
27   width: 100%;
28 }
29 
30 .inputChild {
31   display: block;
32 }

文法エラーを避ける場合。
HTML4.01の文法で徹底する場合は下記のようなマークアップになります。

html
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//ja">
2<html>
3<head>    
4    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5    <meta http-equiv="content-language" content="ja">
6    <title>legend要素のコントロール</title>
7</head>
8<body>
9<h1>git test</h1>
10<div class="table">
11  <fieldset>
12    <legend class="legend">legend</legend>
13    <div class="formHead">
14      legend
15    </div>
16    <div class="inputs">
17      <label class="inputChild"><input type="radio" name="legend">a</label>
18      <label class="inputChild"><input type="radio" name="legend">b</label>
19    </div>
20  </fieldset>
21</div>
22</body>
23</html>

css
1 * {
2   padding: 0;
3   margin: 0;
4 }
5 
6 .table {
7   display: table;
8   border: 1px solid #000;
9 }
10 
11 fieldset {
12   display: table-row;
13   border: none;
14 }
15 
16 .formHead,
17 .inputs {
18   display: table-cell;
19   border: 1px solid #000;
20 }
21 
22.legend {
23  display: none;
24}
25
26 .formHead {
27   min-width: 200px; /* 任意の横幅 */
28 }
29 
30 .inputs {
31   width: 100%;
32 }
33 
34 .inputChild {
35   display: block;
36 }

投稿2017/02/18 00:39

編集2017/02/18 09:48

yamato_hikawa

総合スコア2092

LibertyBell3

2017/02/18 07:42

横から済みません。どうやら、fieldset/legendは、必ずセットで使い、かつ、legendは、fieldsetの「直下」でないといけないらしいです。divなどで囲むのもlintさんで怒られちゃいます(笑)。なので、どちらも使わない仕様でも良いのであれば、dl/dt/ddなんかで、質問者本人が試した方法でいけると思い、回答しませんでした。

yamato_hikawa

2017/02/18 09:32

まあ、HTML4.01だと他にもバリデートエラー出る記述ありますから、そこまで厳密にやろうとしてるのかという話ではありますが…。

natsu_

2017/02/19 07:11

二通りものご回答ありがとうございます質問の仕方悪いとこかなりあり反省しております。 > YukitomoNishinoさん fieldset/legend　は使わなければいけないんです。困っております。 > yamato_hikawa さん >legendは、fieldsetの「直下」でないといけないらしいですのくせに、legend を他の要素で囲まないと table-cell を使って意図した表示にできないというところが一番の問題でございます。 legend はなぜ display で意図した表示にならないのか・・・ひとまず、いただいた回答を元にクライアントと相談してみます。本当にありがとうございます

行動規範の内容に同意します