引导程序响应表中的引导程序标题和正文行未正确对齐

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>