ブートストラップのヘッダーと本文の行がブートストラップ応答テーブルで正しく整列していない

Question

ここでは、jqueryを使用している行を動的に追加するレスポンシブブートストラップテーブルを作成しました。しかし

$(document).ready(function() { 
 
    var rows = ""; 
 
    var a = "test code"; 
 

 
    $("#add_row").click(function() { 
 

 
    rows += "<tr><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td></tr>"; 
 
    $(rows).appendTo("#myTable3 tbody"); 
 
    }); 
 
});

#myTable3 th { 
 
    background-color: #009999; 
 
    color: white; 
 
} 
 

 
.table-fixed {} 
 

 
#myTable3 tbody { 
 
    height: 100px; 
 
    overflow: auto; 
 
} 
 

 
#myTable3 thead, 
 
.tbody { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="table-responsive"> 
 
    <div class="row clearfix"> 
 

 
    <table class="table table-striped table-bordered table-fixed table-hover table-condensed" style="border:0px; " id="myTable3"> 
 
     <thead> 
 
     <tr> 
 
      <th width="">FileNo</th> 
 
      <th width="">Height</th> 
 
      <th width="">Weight</th> 
 
      <th width="">Temperature</th> 
 
      <th width="">Abdominal Circumference</th> 
 
      <th width="">Blood Pressure</th> 
 
      <th width="">Pulse</th> 
 
      <th width="">BMI</th> 
 
      <th width="">Chest Circumference</th> 
 
      <th width="">Time Recorded</th> 
 

 
     </tr> 
 
     </thead> 
 
     <tbody class="tbody"> 
 

 
     </tbody> 
 
    </table> 
 
    <a id="add_row" class="btn btn-default pull-left">Add Row</a> 
 
    </div> 
 
</div>

上以下のようにテーブル本体行は、それぞれヘッダを適切に位置合わせされていないと、上記の問題を説明する断片です。しかし、私はtbadのためのスクロールを得るためにtheadとtbodyのディスプレイブロックを使用しました。もし私がCSSの表示ブロックセクションを削除すると、tbodyとtheadのアライメントは正しく動作しますが、tbodyのスクロールが必要です。

くれ おかげ

Answer 1

問題を助けてくださいあなたはblockとしてtbodyを表示していると、これは間違っているということです、それを削除しても.table-responsiveが十分である、.row内のテーブルをラップする必要はありません。

$(document).ready(function() { 
 
    var rows = ""; 
 
    var a = "test code"; 
 

 
    $("#add_row").click(function() { 
 

 
    rows += "<tr><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td></tr>"; 
 
    $(rows).appendTo("#myTable3 tbody"); 
 
    }); 
 
});

#myTable3 th { 
 
    background-color: #009999; 
 
    color: white; 
 
} 
 

 
.table-fixed {} 
 

 
#myTable3 tbody { 
 
    height: 100px; 
 
    overflow: auto; 
 
} 
 

 
#myTable3 thead, 
 
.tbody { 
 
    /*display: block;*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="table-responsive"> 
 

 
    <table class="table table-striped table-bordered table-fixed table-hover table-condensed" style="border:0px; " id="myTable3"> 
 
     <thead> 
 
     <tr> 
 
      <th width="">FileNo</th> 
 
      <th width="">Height</th> 
 
      <th width="">Weight</th> 
 
      <th width="">Temperature</th> 
 
      <th width="">Abdominal Circumference</th> 
 
      <th width="">Blood Pressure</th> 
 
      <th width="">Pulse</th> 
 
      <th width="">BMI</th> 
 
      <th width="">Chest Circumference</th> 
 
      <th width="">Time Recorded</th> 
 

 
     </tr> 
 
     </thead> 
 
     <tbody class="tbody"> 
 

 
     </tbody> 
 
    </table> 
 
    <a id="add_row" class="btn btn-default pull-left">Add Row</a> 
 
</div>

#myTable3 thead, 
.tbody { 
    /*display: block;*/ 
} 

Answer 2

あなたの問題は、デフォルトで、それぞれdisplay: table-header-groupとdisplay: table-row-groupを可能CSSスタイルを削除する必要がありdisplay: blockにごthead要素とTBODYを設定し、それが正常に動作する必要があります。

希望すると助かります！

$(document).ready(function() { 
 
    var rows = ""; 
 
    var a = "test code"; 
 

 
    $("#add_row").click(function() { 
 

 
    rows += "<tr><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td><td>" + a + "</td></tr>"; 
 
    $(rows).appendTo("#myTable3 tbody"); 
 
    }); 
 
});

#myTable3 th { 
 
    background-color: #009999; 
 
    color: white; 
 
} 
 

 
.table-fixed {} 
 

 
#myTable3 tbody { 
 
    height: 100px; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="table-responsive"> 
 
    <div class="row clearfix"> 
 

 
    <table class="table table-striped table-bordered table-fixed table-hover table-condensed" style="border:0px; " id="myTable3"> 
 
     <thead> 
 
     <tr> 
 
      <th width="">FileNo</th> 
 
      <th width="">Height</th> 
 
      <th width="">Weight</th> 
 
      <th width="">Temperature</th> 
 
      <th width="">Abdominal Circumference</th> 
 
      <th width="">Blood Pressure</th> 
 
      <th width="">Pulse</th> 
 
      <th width="">BMI</th> 
 
      <th width="">Chest Circumference</th> 
 
      <th width="">Time Recorded</th> 
 

 
     </tr> 
 
     </thead> 
 
     <tbody class="tbody"> 
 

 
     </tbody> 
 
    </table> 
 
    <a id="add_row" class="btn btn-default pull-left">Add Row</a> 
 
    </div> 
 
</div>