Bootstrap表標題和表主體未正確對齊

Question

我創建了一個引導表。 我正在使用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的高度會降低。 由於我希望桌子主體在高度增加到超出默認高度設置時自動滾動，因此我使用了顯示塊。

我無法弄清楚我要去哪里。 請幫我！ 謝謝

Answer 1

好。 所以，你去。

1. min-height和height適用於block級元素，而table不是block級元素。 因此，如果刪除下面的代碼，則將解決最初的對齊問題，但是在刪除以下類后，tbody將不會采用您定義的200px的高度，因為它不再是塊級元素。

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

2. 因此，這是為您提供的解決方案。

   一種。 您首先刪除上述類，這將對解決您的初始問題很有幫助。

   b。 要達到預期的高度，您需要將整個表格制作為display:block並為其指定min-height 。 請參閱CSS文件中的#myTable1 。

   C。 最后，在主表#myTable1 ，必須將相對位置設置為對齊hide類（加號），因為我們要將其移出table范圍並使其成為單獨的div 。

   d。 #hide div現在可以進行樣式設置了。 我們將其設置為position:absolute ，以使其從其第一個non-static父級開始獲取其位置，並根據您的#myTable1 min-height設置top值。 我們完成了。

工作副本在這里。

 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> 

我希望這能幫到您。 祝好運 ！

Answer 2

只需將css overflow從auto更改為覆蓋即可。

從此更改代碼：

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

有了這個：

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

Answer 3

從表，thead，tbody標簽中移除display：block。 他們具有默認的顯示樣式來對齊表格

table.alpha .thalpha，.tbalpha {

display:block;

}這應該可以解決此問題，也不需要將寬度設置為td元素，td元素，與th（在同一列中）元素共享寬度