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

Question

在Chrome中显示我的表格时，表格会在放大时更改其单元格大小。该表在其他浏览器(IE，Firefox(中也以错误的方式显示。我已经尝试将大小更改为百分比，似乎不起作用。

这就是它的外观(当缩放为 90% 时在 Chrome 中工作(： 正确的表格

这是我在 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: 0mmtd和margin: 0mm里面的div。正因为如此，div继承了 td 的height: 104mm和重新调整的大小以适应div 及其填充。