Bootstrap table header and table body not aligning properly

Question

I have created a bootstrap table. I am using javascript to add rows dynamically. But the problem is that table header and table body is not aligning properly. I have created a snippet below.

function display(){ 
	
	
	var tableRef = document.getElementById('myTable1').getElementsByTagName('tbody')[0];
	var rowsAdd = tableRef.insertRow(tableRef.rows.length);  
	
	//    var m = moment().format('YYYY-MM-DD h:mm a');

	  var newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<input type='text'  form ='form1'  class= 'form-control input-sm' value=' ' id = 'typeofdr' name= 'typeofdr'  required>";
	  newCell.style.width ='100px';
		 
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= 'form-control input-sm' value=' '  type='text' id = 'drugname' name= 'drugname'  required> </td></tr>";
	  newCell.style.width ='100px';
		 
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'strdrug' name= 'strdrug'  required> </td></tr>";
	  newCell.style.width ='100px';
		 
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'dosage' name= 'dosage'  required> </td></tr>";
	  newCell.style.width ='50px';
	  
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= ''  type='checkbox' id = 'dm' value= 'on' name= 'dm'  ><input type='hidden' name='dm' value='off' form='form1'> </td></tr>";
	  newCell.style.width ='37.5px';
	  
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= ''  type='checkbox' id = 'da' name= 'da' value='on'  ><input type='hidden' name='da' value='off' form='form1'> </td></tr>";
	  newCell.style.width ='37.5px';
	  
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= ''  type='checkbox' id = 'de' name= 'de' value='on' ><input type='hidden' name='de' value='off' form='form1'> </td></tr>";
	  newCell.style.width ='37.5px';
	  
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= ''  type='checkbox' id = 'dn' name= 'dn' value='on' ><input type='hidden' name='dn' value='off' form='form1'> </td></tr>";
	  newCell.style.width ='37.5px';
		 
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><select  form ='form1' class= 'form-control input-sm' value=' ' id = 'baf' name= 'baf'  required><option>Before</option><option>After</option></select> </td></tr>";
	  newCell.style.width ='90px';
		 
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'totn' name= 'totn'  required> </td></tr>";
	  newCell.style.width ='70px';
		 
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'nofdays' name= 'nofdays'  required> </td></tr>";
	  newCell.style.width ='50px';
		 
	 
	  
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td class='tds'><i class='fa fa-trash-o' font-size:20px'  onclick='deleteRow(this)'></i></td></tr>";
	  newCell.style.width ='50px';
		 

	
}

function deleteRow(r) {
	
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("myTable1").deleteRow(i);
   
    
}

table.alpha th {
    background-color: #009999;
    color: white;
}

table.alpha .tbalpha{
    height:200px;
    overflow-y:auto;
 }
table.alpha .thalpha,.tbalpha{
  
    display:block;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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="container">
	      
	     
	     
	     	    
  <table class="table table-striped table-bordered table-responsive table-hover table-condensed alpha" style="width: 760px; " id="myTable1">
    <thead class="thalpha">
      <tr>
        <th rowspan = "2" style="width:100px;">Type of Drug</th>
        <th rowspan = "2" style="width:100px;">Name of Drug(Generic Name)</th>
        <th rowspan = "2" style="width:100px;">Strength of Drug</th>
        <th rowspan = "2" style="width:50px;">Dosage</th>
        <th colspan = "4" style="width:150px;" >Frequency</th>
        <th rowspan = "2" style="width:90px;">Before /After Food</th>
        <th rowspan = "2" style="width:70px;">Total No. of Tablets to be dispensed</th>
        <th rowspan = "2" style="width:50px;">No. of Days</th>
        <th rowspan = "2" style="width:30px;">Delete Row</th>
        </tr>
      <tr>
      <th style="width:37.5px;">M</th>
      <th style="width:37.5px;">A</th>
      <th style="width:37.5px;">E</th>
      <th style="width:37.5px;">N</th>
      </tr>
    </thead>
   
    <tbody  class="tbalpha">

   
    </tbody>

     <tr id="hide">
		    <td><i class='fa fa-plus' style='font-size:20px; color : #ff9900;'  onclick="display()"></i></td>
		  </tr>
		  
    </table>
   
	      
	      
	      
	      </div>

But when i remove display block in css, height of tbody gets reduced. Since i want the table body to scroll automatically as the height increases beyond the default height set, i have used display block.

I am not able to figure out where i am going wrong. Please Help Me! Thanks

Answer 1

Deleting rowspans and colspans attributes will work.

Answer 2

Ok. So, here you go.

1. min-height and height apply to block level elements and a table isn't a block level element. So if you remove the below code your initial issue of alignment will be solved but tbody wont take the height which you have defined 200px as it is not a block level element anymore after you remove the below class.

   table.alpha .thalpha,.tbalpha{
   
   display:block;}
   

2. So here is a solution for you .

   a. You remove the above class first which will be useful to solve your initial issue.

   b. To make the height as expected you need to make your full table as display:block and give a min-height to it. refer #myTable1 in css file.

   c. Finally in the main table #myTable1 you have to set position relative in according to align your hide class (plus sign) as we are moving it out of the table scope and making it a separate div.

   d. #hide div is now ready for your styling . We set it as a position:absolute so that it takes it position from its first non-static parents and set the top value according to your #myTable1 min-height. And we are done.

Working copy is here below.

function display(){ 
	
	
	var tableRef = document.getElementById('myTable1').getElementsByTagName('tbody')[0];
	var rowsAdd = tableRef.insertRow(tableRef.rows.length);  
	
	//    var m = moment().format('YYYY-MM-DD h:mm a');

	  var newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<input type='text'  form ='form1'  class= 'form-control input-sm' value=' ' id = 'typeofdr' name= 'typeofdr'  required>";
	  newCell.style.width ='100px';
		 
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= 'form-control input-sm' value=' '  type='text' id = 'drugname' name= 'drugname'  required> </td></tr>";
	  newCell.style.width ='100px';
		 
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'strdrug' name= 'strdrug'  required> </td></tr>";
	  newCell.style.width ='100px';
		 
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'dosage' name= 'dosage'  required> </td></tr>";
	  newCell.style.width ='50px';
	  
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= ''  type='checkbox' id = 'dm' value= 'on' name= 'dm'  ><input type='hidden' name='dm' value='off' form='form1'> </td></tr>";
	  newCell.style.width ='37.5px';
	  
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= ''  type='checkbox' id = 'da' name= 'da' value='on'  ><input type='hidden' name='da' value='off' form='form1'> </td></tr>";
	  newCell.style.width ='37.5px';
	  
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= ''  type='checkbox' id = 'de' name= 'de' value='on' ><input type='hidden' name='de' value='off' form='form1'> </td></tr>";
	  newCell.style.width ='37.5px';
	  
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= ''  type='checkbox' id = 'dn' name= 'dn' value='on' ><input type='hidden' name='dn' value='off' form='form1'> </td></tr>";
	  newCell.style.width ='37.5px';
		 
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><select  form ='form1' class= 'form-control input-sm' value=' ' id = 'baf' name= 'baf'  required><option>Before</option><option>After</option></select> </td></tr>";
	  newCell.style.width ='90px';
		 
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'totn' name= 'totn'  required> </td></tr>";
	  newCell.style.width ='70px';
		 
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td><input  form ='form1' class= 'form-control input-sm' value=' ' type='text' id = 'nofdays' name= 'nofdays'  required> </td></tr>";
	  newCell.style.width ='50px';
		 
	 
	  
	  newCell = rowsAdd.insertCell();
	  newCell.innerHTML="<tr><td class='tds'><i class='fa fa-trash-o' font-size:20px'  onclick='deleteRow(this)'></i></td></tr>";
	  newCell.style.width ='50px';
		 

	
}

function deleteRow(r) {
	
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("myTable1").deleteRow(i);
   
    
}

table.alpha th {
    background-color: #009999;
    color: white;
}

table.alpha .tbalpha{
    height:200px;
    overflow-y:auto;
 }
table.alpha .thalpha,.tbalpha{
  
    /*remved*/
  }
  #myTable1 {
  display:block;
  height:500px;
  width:820px;
  position:relative;
  }
  #hide {
  width: 750px;
    background: #f5f5f5;
   position:absolute;
   top:500px;
   border: 1px solid #ddd;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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="container">
	      
	     
	     
	     	    
  <table class="table table-striped table-bordered table-responsive table-hover table-condensed alpha" id="myTable1">
    <thead class="thalpha">
      <tr>
        <th rowspan = "2" style="width:100px;">Type of Drug</th>
        <th rowspan = "2" style="width:100px;">Name of Drug(Generic Name)</th>
        <th rowspan = "2" style="width:100px;">Strength of Drug</th>
        <th rowspan = "2" style="width:50px;">Dosage</th>
        <th colspan = "4" style="width:150px;" >Frequency</th>
        <th rowspan = "2" style="width:90px;">Before /After Food</th>
        <th rowspan = "2" style="width:70px;">Total No. of Tablets to be dispensed</th>
        <th rowspan = "2" style="width:50px;">No. of Days</th>
        <th rowspan = "2" style="width:30px;">Delete Row</th>
        </tr>
      <tr>
      <th style="width:37.5px;">M</th>
      <th style="width:37.5px;">A</th>
      <th style="width:37.5px;">E</th>
      <th style="width:37.5px;">N</th>
      </tr>
    </thead>
   
    <tbody  class="tbalpha">

   
    </tbody>

  
		  
    </table>
   
	         <div id="hide">
		    <td><i class='fa fa-plus' style='font-size:20px; color : #ff9900;'  onclick="display()"></i></td>
		  </div>
	      
	      
	      </div>

I hope this will help you. Good luck !

Answer 3

Just change your css overflow from auto to overlay.

Change your code from this:

table.alpha .tbalpha{
    height:200px;
    overflow-y:auto;
}

With this:

table.alpha .tbalpha{
    height:200px;
    overflow-y:overlay;
}

Answer 4

remove display:block from your table, thead, tbody tags. they have default display styles to align your table

table.alpha .thalpha,.tbalpha{

display:block;

} this should fix it, also you dont need to set width to td elements, td elements, share width with th(in same column) elements