質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • HTML

    9317questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6944questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    6035questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4191questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2145questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 1,111

nnahito

score 1737

現在,研究で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が反映されません.

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

イメージ説明
コードを一部抜粋します.
表示部分は,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が反映されないのか
  • また,どのように書けば反映されるのか

よろしくお願いいたします.
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 1000

    2015/06/02 12:59

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

    キャンセル

  • nnahito

    2015/06/02 14:51

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

    キャンセル

  • 1000

    2015/06/02 15:04

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

    キャンセル

回答 1

checkベストアンサー

+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" がありません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/06 01:55

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    9317questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6944questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    6035questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4191questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2145questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。