auf Chrome Zooming verursacht CSS Position ändert

Question

I Tabellen-Layout haben als

feste

table { 
 
    padding: 8px; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 

 
td, 
 
th { 
 
    text-align: center; 
 
    padding: 8px; 
 
    table-layout: auto; 
 
}

<table> 
 
    <tr> 
 
    <th>Part No</th> 
 
    <th>Description</th> 
 
    <th style="text-align:center; width:100%; position:relative;z-index:5;">Part Status</th> 
 
    <th>Zone</th> 
 
    <th>Min Qty</th> 
 
    <th>Max Qty</th> 
 
    <th>Cost</th> 
 
    <th>Proposed Cost</th> 
 
    <th>Varience (%)</th> 
 
    <th style="text-align:center; width:100%;">Status</th> 
 
    <th>Pending Removal</th> 
 
    <th>Approvl Status</th> 
 
    <th>Locked</th> 
 
    <th>EffectiveDate</th> 
 
    </tr> 
 
</table>

Der Teil Status und Statusspalten dort TD seine Position zu verändern, wenn ich es auf -25% vergrößern oder verkleinern.

In Bild können Sie partstatus (6. Spalte) seine td Position geändert wird, finden. Kann mir jemand helfen, wie kann ich das lösen?

Answer 1

Verwenden Sie flex. display:inline-flex; auf dem Tisch.

table { 
 
    padding: 8px; 
 
    width: 100%; 
 
    table-layout: fixed; 
 
    display:inline-flex; 
 
} 
 

 
td, 
 
th { 
 
    text-align: center; 
 
    padding: 8px; 
 
    table-layout: auto; 
 

 
}

<table> 
 
    <tr> 
 
    <th>Part No</th> 
 
    <th>Description</th> 
 
    <th style="text-align:center; width:100%; position:relative;z-index:5;">Part Status</th> 
 
    <th>Zone</th> 
 
    <th>Min Qty</th> 
 
    <th>Max Qty</th> 
 
    <th>Cost</th> 
 
    <th>Proposed Cost</th> 
 
    <th>Varience (%)</th> 
 
    <th style="text-align:center; width:100%;">Status</th> 
 
    <th>Pending Removal</th> 
 
    <th>Approvl Status</th> 
 
    <th>Locked</th> 
 
    <th>EffectiveDate</th> 
 
    </tr> 
 
</table>