bootstrap响应表

Question

这里我创建了一个响应式引导表，我想动态添加行，我正在使用jquery。但是表体行没有与它们各自的标题正确对齐，如下所示

＆＃13;

＆＃13;

$(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");
  });
});

＆＃13;

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

.table-fixed {}

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

以上是解释上述问题的片段。但我已经使用了显示块为thead和tbody获取tbody的滚动。如果我删除css中的显示块部分，tbody和thead的对齐工作正常，但我需要滚动tbody。

请帮帮我 感谢

Answer 1

问题在于您将tbody显示为block这是错误的，只需将其删除，也无需将表格包裹在.row内，{{1}就够了。

.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;*/
}

Answer 2

您的问题是您将thead和tbody设置为display: block，默认情况下应分别为display: table-header-group和display: table-row-group，删除css样式，它应该可以正常工作。

希望它有所帮助！

＆＃13;

＆＃13;

$(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");
  });
});

＆＃13;

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

.table-fixed {}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;