我已经创建了一个 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 中的显示 block 时，tbody 的高度会降低。因为我希望表体在高度增加到超过默认高度设置时自动滚动，所以我使用了显示 block 。
我无法弄清楚我哪里出错了。 请帮我! 谢谢
最佳答案
好的。所以，给你。
min-height和height适用于block级别的元素，而table则不然block级元素。因此，如果您删除以下代码，您最初的对齐问题将得到解决，但 tbody 不会采用您定义的 200px 高度，因为在您删除以下类后它不再是 block 级元素。table.alpha .thalpha,.tbalpha{ display:block;}所以这是适合您的解决方案。
一个。您首先删除上述类，这将有助于解决您最初的问题。
要使高度符合预期，您需要将整个表格设置为
display:block并为其指定一个min-height。在 css 文件中引用#myTable1。最后，在主表
#myTable1中，您必须根据对齐您的hide类(加号)来设置相对位置，因为我们将其移出表作用域并使其成为一个单独的div。#hidediv 现在已准备好您的样式。我们将其设置为position:absolute以便它从其第一个non-static父级获取位置并根据您的设置top值#myTable1最小高度。我们完成了。
工作副本在下面。
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>希望对您有所帮助。祝你好运!
关于javascript - Bootstrap 表头和表体未正确对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47152482/