テーブル行の最後のセルのサイズが間違っている

Question

テーブル1とテーブル3の両方のテーブルトウを幅に合わせようとしていますが、現在では最後のセルはありません。 2つのテーブルの理由は、テーブル1の固定ヘッダーとテーブル2のスクロール可能なオーバーフローコンテンツです。このアプローチは過去に私のために働いていましたが、このエラーを生成するためにこの例とは何が違うのか分かりません。

#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; 
 
}

<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>

Answer 1

問題がoverflow: scroll;かもしれないように見えます。これを削除することは私の目的のために機能するようです。

編集：残念ながら、スクロールバーが自然にスペースを占めるため、overflow: scrollでこの問題に取り組み続けます。テーブルボディラッパーに負の右パディングを適用しようとすると、ブラウザの互換性の問題が発生します。おそらく、上限のラッパーにoverflow: scrollを適用してみることもできますか？それでもかわいいですが、やはりうまくいくかもしれません。