表头和表体列不匹配答案

【问题标题】：Table Header and table body column mismatch表头和表体列不匹配
【发布时间】：2017-11-07 09:26:40
【问题描述】：

我创建了一个引导表，其中将动态添加行。但是表体和表头对齐不匹配，如下面的sn-p所示。

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;">Item</th>
        <th rowspan="2" style="width:100px;">Name of Drug</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>

如上面的 sn-p 所示，表格列标题和表格主体列行都没有正确对齐，即表格单元格不完全低于其对应的标题单元格。我猜 css 可能有问题，但是如果删除 css 中的 display:block，即使设置了高度，表格主体高度也会降低（在上面的 css 代码中，tbody 高度设置为 200px）。

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

那是因为您正在改变 tbody 和 thead 的显示方式：

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

如果删除它，列将对齐

【讨论】：

谢谢，但是表格主体的高度变小了。我们不能将 tbody 的默认高度固定为某个值吗？
如果tbody的高度大于默认高度，是否需要显示块才能在tbody上实现滚动？
如果你想要一个滚动条，你可以在tbody上使用max-height，不需要display: block，如果你想要在没有或很少行的情况下有一定的高度，你可以使用height 而不是 tbody 上的 min-height，但行将扩展到 tbody 的高度

【解决方案2】：

您不应更改tbody 的display 属性，因为它的默认属性为display: table-row-group。通过删除display 将正确对齐。

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 {
  display: block;
  height: 300px;
  overflow-y: auto;
}

<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;">Item</th>
        <th rowspan="2" style="width:100px;">Name of Drug</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>

注意将display: block 设置为table 将拉伸到100% width。

【讨论】：

感谢您的回复！但是我们不能将 tbody 高度设置为默认 200 像素吗？我在 css 中将其设置为 200px，但如果我们删除表体高度会降低
@coder12346 检查更新的 sn-p。您不能在 tbody 上设置 display 属性。这里我将height 和display（即使这个也不推荐）设置为table。这可能会提供所需的输出。
但是如何将标题固定在同一位置并仅提供对表体的滚动？