[英]Bootstrap table header and table body not aligning properly
I have created a bootstrap table. 我创建了一个引导表。 I am using javascript to add rows dynamically. 我正在使用javascript动态添加行。 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. 但是当我在css中删除显示块时,tbody的高度会降低。 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 谢谢
Ok. 好。 So, here you go. 所以,你去。
min-height
and height
apply to block
level elements and a table
isn't a block
level element. min-height
和height
适用于block
级元素,而table
不是block
级元素。 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. 因此,如果删除下面的代码,则将解决最初的对齐问题,但是在删除以下类后,tbody将不会采用您定义的200px的高度,因为它不再是块级元素。
table.alpha .thalpha,.tbalpha{ display:block;}
So here is a solution for you . 因此,这是为您提供的解决方案。
a. 一种。 You remove the above class first which will be useful to solve your initial issue. 您首先删除上述类,这将对解决您的初始问题很有帮助。
b. b。 To make the height as expected you need to make your full table as display:block
and give a min-height
to it. 要达到预期的高度,您需要将整个表格制作为display:block
并为其指定min-height
。 refer #myTable1
in css file. 请参阅CSS文件中的#myTable1
。
c. 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
. 最后,在主表#myTable1
,必须将相对位置设置为对齐hide
类(加号),因为我们要将其移出table
范围并使其成为单独的div
。
d. d。 #hide
div is now ready for your styling . #hide
div现在可以进行样式设置了。 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. 我们将其设置为position:absolute
,以使其从其第一个non-static
父级开始获取其位置,并根据您的#myTable1
min-height设置top
值。 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 ! 祝好运 !
Just change your css overflow
from auto
to overlay. 只需将css overflow
从auto
更改为覆盖即可。
Change your code from this: 从此更改代码:
table.alpha .tbalpha{
height:200px;
overflow-y:auto;
}
With this: 有了这个:
table.alpha .tbalpha{
height:200px;
overflow-y:overlay;
}
remove display:block from your table, thead, tbody tags. 从表,thead,tbody标签中移除display:block。 they have default display styles to align your table 他们具有默认的显示样式来对齐表格
table.alpha .thalpha,.tbalpha{ 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 }这应该可以解决此问题,也不需要将宽度设置为td元素,td元素,与th(在同一列中)元素共享宽度
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.