javascript - Bootstrap 标题和主体的行在 Bootstrap 响应表中未正确对齐

Question

我在这里创建了一个响应式 Bootstrap 表，我想在其中动态添加我正在使用 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 的显示 block 来获得 tbody 的滚动条。如果我删除 css 中的显示 block 部分，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>