在放大浏览器时，表格单元格会调整大小

Question

在Chrome中显示我的表格时，表格会在放大时更改其单元格大小。在其他浏览器（IE，Firefox）中，该表格也会以错误的方式显示。我已经尝试将尺寸改为百分比，但似乎无法正常工作。

它应该是这样的（当缩放为90％时在Chrome中有效）： correct table

这是jsfiddle中的代码（它不应该是什么样子）

     <table id="Form50_t_data" style="table-layout: fixed; width: 100%; height: 100%; max-height: 104.00; position: absolute; left: 1.00; top: 38.50; border-bottom: 0.10mm solid #00FFFF; border-collapse: collapse; text-align: left;">
        <tr>
           <td colspan="3" id="Form50_t_title" style="border-bottom: 0.30mm solid #00FFFF; background-color: #8080C0; min-height: 9.70; max-height: 9.70;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 10.00mm; text-align: center;">Chrono</div>
           </td>
        </tr>
        <tr class="Form50_t_odd">
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">1</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">6</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">14</div>
           </td>
        </tr>
        <tr class="Form50_t_even">
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">2</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">7serdbbikguky</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">15</div>
           </td>
        </tr>
        <tr class="Form50_t_odd">
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">3</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">8</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">16</div>
           </td>
        </tr>
        <tr class="Form50_t_even">
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">4dfghsdftgy</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">9</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">17</div>
           </td>
        </tr>
        <tr class="Form50_t_odd">
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">5</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">10</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">18fxgcgjuvfyt</div>
           </td>
        </tr>
        <tr class="Form50_t_even">
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">&nbsp;</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">11</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">19</div>
           </td>
        </tr>
        <tr class="Form50_t_odd">
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">&nbsp;</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">12</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">20</div>
           </td>
        </tr>
        <tr class="Form50_t_even">
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">&nbsp;</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">ghjkl</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">dfgh</div>
           </td>
        </tr>
        <tr class="Form50_t_odd">
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">&nbsp;</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">dcfgvhbnj</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">dfghj</div>
           </td>
        </tr>
        <tr class="Form50_t_even">
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">&nbsp;</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">cfvgbh</div>
           </td>
           <td style="min-height: 9.30mm; max-height: 9.30mm;">
              <div style="height: 100%; width: 100%; overflow: hidden; line-height: 9.30mm; padding-left: 0.50mm;">fghj</div>
           </td>
        </tr>
     </table>

感谢您的帮助！

Answer 1

问题是我没有将padding: 0mm指定为td而margin: 0mm指定给div。因此，div固有td的height: 104mm和重新调整的大小以适合div及其填充。