rows of bootstrap header and body not aligning properly in bootstrap responsive table

Question

Here i have created a responsive bootstrap table where i want to add rows dynamically for which i am using jquery. But table body rows are not aligning properly with their respective headers as shown below

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

Above is the snippet which explains the above problem. But i have used display block for thead and tbody to obtain scroll for tbody. If i remove display block section in css, alignment of tbody and thead works properly, but i need scroll for tbody.

Please Help me Thanks

score 1 · Answer 1 · answered Nov 05 '17 at 12:57

The problem is that you are displaying tbody as block and this is wrong, just remove it and also there is no need to wrap the table inside .row, .table-responsive is enough.

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

Yes man. Your answer is right in this case. I didn't look it carefully enough. Gave you a vote. — Praveen Kumar Purushothaman, Nov 05 '17 at 13:02

score 0 · Answer 2 · answered Nov 05 '17 at 12:58

your problem is you set your thead and tbody to display: block, which by default should be display: table-header-group and display: table-row-group respectively, remove the css style and it should work fine.

Hope it helps!

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

Thanks for your reply! but i have one doubt, if we remove display block then scroll for tbody will not work then is there any other way by which we can implement scroll for tbody? — coder12346, Nov 05 '17 at 13:03
@coder12346 Welcome, you can check out this solution: [How to set tbody height with overflow scroll](https://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll) — AngYC, Nov 05 '17 at 13:13

rows of bootstrap header and body not aligning properly in bootstrap responsive table

2 Answers2