【HTML，CSS，jQuery】display:table系でのマージンやサイズの指定方法

Question

現在，研究でWebでの推薦システムを構築しております．
そのプロトタイプを作成しているのですが，HTML5を全く勉強したことがなかったため，少し真似しながら作ってみようと，表を

<div style="display: table">
    <div style="display: table-row">
        <div style="display: table-cell">cell 1</div>
        <div style="display: table-cell">cell 2</div>
    </div>
</div>

のような「display」を用いてつくろうとしています．

しかし，いざ実行してみると，指定したCSSが反映されません．

具体的には以下のようになります．

![イメージ説明]WIDTH:600

コードを一部抜粋します．
表示部分は，HTMLのDIVに，jQueryでPHPファイルからデータを取得してきたものをappendしています．

/* センター寄せ */
.automargin{
	margin-left: auto;
	margin-right: auto;
}


/* DIVをテーブル化 */
.table{
	border-collapse: separate;
	border-spacing: 3px 3px;
	display: table;
}

.tr{
	display: table-row;
}

.td{
	display: table-cell;
	padding: 5px;
}

<div id="result"></div>

function recommand(){
			//先に中身を空にする
			$("#result").empty();
			
			//データの取得
			var $body = document.getElementById("body").value;
			var $taste = document.getElementById("taste").value;
			var $time = document.getElementById("time").value;
			var $money = document.getElementById("money").value;
			var $arrange = document.getElementById("arrange").value;
			
			var $map = {body : $body, taste : $taste, time : $time, money : $money, arrange : $arrange}
			
			
			$.ajax({
				type: "POST",
				url: "recommend.php",
				data: $map,
				}).done(function(xml){
				var $str = xml;
				var $sp = xml.split("\n");
				
				
				//table骨組
				$("#result").append('<div style="display: table; width: 800px;">');
				
				for (var $i=0; $i<$sp.length; $i++){
					if ($sp[$i] == ""){
						continue;
					}
					
					var $ele = $sp[$i].split(",");
					var $result = "";
					
					$result = '<span class="recipe_name">'+ $ele[0] +'</span><br>';
					for (var $j=1; $j<$ele.length; $j++){
						$result = $result + $ele[$j] + "<br>";
					}
					
					
					//推薦結果の表示
					$result = $result + '<hr><input type="radio">妥当である<br><input type="radio">やや妥当である<br><input type="radio">どちらとも言えない<br><input type="radio">やや妥当でない<br><input type="radio">妥当でない<br>';
					$result = "hogehoge";
					$("#result").append('<div class="tr">');
					$("#result").append('<div class="result automargin td" style="text-align: left;">'+ $result +'</div>');
					//$("#result").append('<div class="td" style="width: 5px;"></div>');
					$("#result").append('<div class="result automargin td" style="text-align: left;">'+ $result +'</div>');
					$('#result').append('</div>');
					
					//$("#result").append('<div class="tr"><div class="td" style="width: 1px; height: 1px;"></div></div>');
					
				}
				
				//table骨組み
				$("#result").append('</div>');
				
			});
			
			
		}

JavaScript内の，
//$("#result").append('<div class="tr"><div class="td" style="width: 1px; height: 1px;"></div></div>');
などのコメントを外し，無理矢理div要素を挿入してやると空白は空きます．
が，なぜ
width: 800px;
や
border-collapse: separate;
border-spacing: 3px 3px;
が反映されていないのかがわかりませんので，この部分を解決したいと考えています．

よろしくお願いいたします．

---

質問まとめ．

• なぜCSSが反映されないのか
• また，どのように書けば反映されるのか

よろしくお願いいたします．

Comments

[1000]

phpで吐き出されたソースでもjsで動的にappendしたソースでもCSSが聞かないなんて事は無いですよ。
ということで、最終的な形のソースをchromeのデベロッパーツールとかで表示してそれを提示してもらえればcssのミス等がわかりますよ。

[nnahito]

Firefoxの「インスペクタ」では，表示されませんでした…

[1000]

ということはCSSの問題ではなさそうですね、JSかPHPのもんだいなので、現象が再現できるだけの正確なソースが全て揃っていれば回答が集まりやすいかとおもいます。

Answer 1

css が下記の通りなのであれば、

.table{
    border-collapse: separate;
    border-spacing: 3px 3px;
    display: table;
}

js の下記の箇所は

$("#result").append('<div style="display: table; width: 800px;">');

下記の間違いではないでしょうか。

$("#result").append('<div class="table" style="width: 800px;">');

css で .table と table クラスのスタイルを定義しているのに、js のコード（が吐き出すDOM）に class="table" がありません。

Comments

[nnahito]

ご回答有難うございます。
自己解決いたしました。

$("#result").append('<div class="table" style="width: 800px;">');
ですが、appendは勝手に</div>を補完しているようで、それが原因でした。