Bootstrap表头和表体未正确对齐

时间：2017-11-07 07:46:32

标签： javascript html css twitter-bootstrap

我创建了一个bootstrap表。我正在使用javascript动态添加行。但问题是表头和表体没有正确对齐。 我在下面创建了一个片段。

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>

但是当我删除css中的显示块时，tbody的高度会降低。由于我希望表体在高度增加超过默认高度设置时自动滚动，我使用了显示块。

我无法弄清楚我哪里出错了。 请帮我！ 感谢

3 个答案:

答案 0 :(得分：2)

确定。所以，你走了。

  1. min-height和height适用于block级元素，而table不是block级元素。因此，如果你删除下面的代码，你的初始对齐问题将会得到解决，但是你不会采用你已定义200px的高度，因为在你删除下面的类后它不再是块级元素。

    table.alpha .thalpha,.tbalpha{

display:block;}

  2. 所以这里有一个解决方案。

    一个。您首先删除上述类，这对解决您的初始问题非常有用。

    湾要按照预期设置高度，您需要将整个表格设为display:block并为其提供min-height。在css文件中引用#myTable1。

    ℃。最后在主表#myTable1中，您必须根据hide类（加号）对齐设置相对位置，因为我们正在将其移出table范围并将其分开div。

    d。 #hide div现在已准备好进行造型。我们将其设置为position:absolute，以使其从第一个non-static父项开始定位，并根据您的top最小高度设置#myTable1值。我们已经完成了。

    3. 工作副本如下所示。

    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>

    我希望这会对你有所帮助。祝你好运！

答案 1 :(得分：0)

只需将您的css overflow从auto更改为覆盖。

从此处更改您的代码： 

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

有了这个： 

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

答案 2 :(得分：0)

从你的桌子，thead，tbody标签中删除display：block。 他们有默认的显示样式来对齐你的表

table.alpha .thalpha，.tbalpha {

display:block;

} 这应该修复它，你也不需要设置宽度为td元素， td元素，与th（在同一列中）元素共享宽度

相关问题
最新问题