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

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就足够了。

#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>