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（在同一列中）元素共享宽度