Table row final cell wrongly sized - html

Question

I am trying to get both the table tow of the table one and table three to match in width- at present, the last cell does not. The reason for the two tables is fixed headers on table one and scrollable overflow content for table 2. This approach has worked in the past for me and I just cannot figure out what is different with this example to produce this error.
#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

It looks like the issue might be the overflow: scroll;. Removing this seems to work on my end.
Edit: Unfortunately you're going to continue running into this issue with the overflow: scroll due to the scrollbar naturally taking up space. You could trying applying negative right padding to your table body wrapper, but you'll then run into browser compatibility issues. Perhaps you could try applying the overflow: scroll to the upper wrapper as well? It wouldn't be pretty, but it might work nonetheless.