放大浏览器时表格单元格调整大小答案

【问题标题】：Table cells resize when zooming in browser放大浏览器时表格单元格调整大小
【发布时间】：2017-08-22 00:39:05
【问题描述】：

在 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>

感谢您的帮助！

【问题讨论】：

嗯，fiddle中的代码和你贴的图一模一样，不知道是不是我一个人
我很乐意提供帮助，但如果这是基于浏览器的问题，我很抱歉这超出了我的域
min-height 允许在放大时调整大小。使用 height 或 max-height 并且单元格不应调整大小。在 CSS 中定义尺寸而不是在 HTML 中的每个单元格上定义尺寸会更好
也许它没有显示，因为您在表格样式上的max-height 已超出
@Thodoris height 和 max-height 似乎都不起作用。不过，感谢您对 css 的提示

标签： css html google-chrome firefox

【解决方案1】：

问题是我没有指定padding: 0mm 到td 和margin: 0mm 到div 里面。因此，div 继承了 td 的 height: 104mm，并重新调整了大小以适应 div 及其填充。

【讨论】：