表行最终单元格大小错误

Question

我试图得到表格中的两个表格和表格三以匹配宽度 - 目前，最后一个单元格没有。这两个表的原因是表1上的固定标题和表2的可滚动溢出内容。这种方法在过去对我有效，我无法弄清楚这个例子与产生此错误的不同之处。

＆＃13;

＆＃13;

#table_wrapper1 {
  position: absolute;
  top: 250px;
  left: 20px;
  height: 47px;
  width: 500px;
}

#table1 {
  table-layout: fixed;
  position: absolute;
  display: table;
  font-size: 0.7em;
  border: solid 1px;
  z-index: 2;
  width: 100%;
  background-color: #F7F7F7;
}

#table_wrapper2 {
  position: absolute;
  top: 278px;
  left: 20px;
  width: 500px;
  overflow: scroll;
  height: 150px;
}

#table2 {
  table-layout: fixed;
  position: absolute;
  display: table;
  font-size: .7em;
  border: solid 1px;
  z-index: 2;
  width: 100%;
  background-color: #F7F7F7
}

td {
  padding: 4px;
  border: solid 1px black;
  background-color: #FFF4C6;
  vertical-align: middle;
  text-align: center;
}

th {
  padding: 6px;
  Border: solid 1px black;
  background-color: #BB8A76;
  vertical-align: middle;
  text-align: center;
}

＆＃13;

<div id="table_wrapper1">
  <table class="table" id="table1">
    <thead>
      <tr>
        <th>Unit code</th>
        <th>Description</th>
        <th>Delete unit</th>
        <th>Add new unit</th>
      </tr>
    </thead>
    <tbody></tbody>

  </table>
</div>

<div id="table_wrapper2">
  <table class="table" id="table2">
    <thead></thead>
    <tbody>
      <tr>
        <td><input class="unit <?php echo $class;?>" type="text" name="unit_code[]" value="<?php echo @$_POST['unit_code'][0]?>"></td>
        <td><textarea cols="10" rows="3" class="<?php echo $class;?>" name="unit_description[]"><?php echo @$_POST['unit_description'][0]?></textarea></td>
        <td><img title="remove unit" class="remove_row" src="../images/exit.png"> </td>
        <td><img title="add more units" class="add_row" src="../images/add-resource.png"></td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

看起来问题可能是overflow: scroll;。删除它似乎在我的最终。

编辑：很遗憾，由于滚动条自然占用了空间，您将继续使用overflow: scroll来解决此问题。您可以尝试对表体包装器应用负右填充，但是您将遇到浏览器兼容性问题。也许您可以尝试将overflow: scroll应用于上层包装器？它不会很漂亮，但它可能会起作用。