缩放Chrome会导致CSS位置更改

Question

我将表格布局固定为

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>

当我将其缩放到-25％时，TD处的部件状态和状态列会改变其位置。

在图像中，您可以找到partstatus（第6列），其td位置已更改。 任何人都可以帮助我解决这个问题。

Answer 1

使用flex。 display:inline-flex;在桌面上。

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>