現在,研究でWebでの推薦システムを構築しております.
そのプロトタイプを作成しているのですが,HTML5を全く勉強したことがなかったため,少し真似しながら作ってみようと,表を
lang
1<div style="display: table"> 2 <div style="display: table-row"> 3 <div style="display: table-cell">cell 1</div> 4 <div style="display: table-cell">cell 2</div> 5 </div> 6</div>
のような「display」を用いてつくろうとしています.
しかし,いざ実行してみると,指定したCSSが反映されません.
具体的には以下のようになります.
![イメージ説明]WIDTH:600
コードを一部抜粋します.
表示部分は,HTMLのDIVに,jQueryでPHPファイルからデータを取得してきたものをappendしています.
lang
1/* センター寄せ */ 2.automargin{ 3 margin-left: auto; 4 margin-right: auto; 5} 6 7 8/* DIVをテーブル化 */ 9.table{ 10 border-collapse: separate; 11 border-spacing: 3px 3px; 12 display: table; 13} 14 15.tr{ 16 display: table-row; 17} 18 19.td{ 20 display: table-cell; 21 padding: 5px; 22}
lang
1<div id="result"></div>
lang
1function recommand(){ 2 //先に中身を空にする 3 $("#result").empty(); 4 5 //データの取得 6 var $body = document.getElementById("body").value; 7 var $taste = document.getElementById("taste").value; 8 var $time = document.getElementById("time").value; 9 var $money = document.getElementById("money").value; 10 var $arrange = document.getElementById("arrange").value; 11 12 var $map = {body : $body, taste : $taste, time : $time, money : $money, arrange : $arrange} 13 14 15 $.ajax({ 16 type: "POST", 17 url: "recommend.php", 18 data: $map, 19 }).done(function(xml){ 20 var $str = xml; 21 var $sp = xml.split("\n"); 22 23 24 //table骨組 25 $("#result").append('<div style="display: table; width: 800px;">'); 26 27 for (var $i=0; $i<$sp.length; $i++){ 28 if ($sp[$i] == ""){ 29 continue; 30 } 31 32 var $ele = $sp[$i].split(","); 33 var $result = ""; 34 35 $result = '<span class="recipe_name">'+ $ele[0] +'</span><br>'; 36 for (var $j=1; $j<$ele.length; $j++){ 37 $result = $result + $ele[$j] + "<br>"; 38 } 39 40 41 //推薦結果の表示 42 $result = $result + '<hr><input type="radio">妥当である<br><input type="radio">やや妥当である<br><input type="radio">どちらとも言えない<br><input type="radio">やや妥当でない<br><input type="radio">妥当でない<br>'; 43 $result = "hogehoge"; 44 $("#result").append('<div class="tr">'); 45 $("#result").append('<div class="result automargin td" style="text-align: left;">'+ $result +'</div>'); 46 //$("#result").append('<div class="td" style="width: 5px;"></div>'); 47 $("#result").append('<div class="result automargin td" style="text-align: left;">'+ $result +'</div>'); 48 $('#result').append('</div>'); 49 50 //$("#result").append('<div class="tr"><div class="td" style="width: 1px; height: 1px;"></div></div>'); 51 52 } 53 54 //table骨組み 55 $("#result").append('</div>'); 56 57 }); 58 59 60 }
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が反映されないのか
- また,どのように書けば反映されるのか
よろしくお願いいたします.
回答1件
あなたの回答
tips
プレビュー