Tabelle Zeile letzte Zelle falsch Größe

Question

Ich versuche, sowohl die Tabelle Tow der Tabelle eins und Tabelle drei zu bekommen in der Breite übereinstimmen - zur Zeit, die letzte Zelle nicht. Der Grund für die beiden Tabellen sind feste Header in Tabelle 1 und scrollbarer Überlaufinhalt für Tabelle 2. Dieser Ansatz hat in der Vergangenheit für mich funktioniert und ich kann einfach nicht herausfinden, was in diesem Beispiel anders ist, um diesen Fehler zu erzeugen.

#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

Es sieht aus wie das Problem der overflow: scroll; sein könnte. Das zu entfernen, scheint an meinem Ende zu funktionieren.

Edit: Leider werden Sie in diesem Problem mit dem overflow: scroll aufgrund der Scrollbar weiterhin Platz einnehmen. Sie könnten versuchen, eine negative Rechtspolsterung auf Ihren Tabellenkörperwrapper anzuwenden, aber Sie werden dann auf Browserkompatibilitätsprobleme stoßen. Vielleicht könntest du auch den overflow: scroll auf den oberen Wrapper anwenden? Es wäre nicht schön, aber es könnte trotzdem funktionieren.