引導程序響應表中的引導程序標題和正文行未正確對齊

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> 

以上是說明上述問題的代碼段。 但是我已經為thead和tbody使用了顯示塊來獲得tbody的滾動。 如果我刪除css中的顯示塊部分，則tbody和thead的對齊工作正常，但是我需要滾動tbody。

請幫我謝謝

Answer 1

問題是您將tbody顯示為block ，這是錯誤的，只需將其刪除，也無需將表包裝在.row ， .table-responsive .row .table-responsive 。

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

 $(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> 

Answer 2

您的問題是將thead和tbody設置為display: block ，默認情況下應分別display: table-header-group和display: table-row-group ，刪除css樣式，它應該可以正常工作。

希望能幫助到你！

 $(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>