0
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;"> </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;"> </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;"> </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;"> </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;"> </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>
助けてくれてありがとう!
うーん、フィドルのコードは、あなたが添付された画像とまったく同じ表示されます、それはちょうど私が – Mark
私は助けるのが大好きだだ場合、私は知りませんが、それは、ブラウザベースの問題であれば、私はそれがだごめんなさいout of my domain – Mark
'min-height'はズームイン時にサイズ変更を許可します。' height'または 'max-height'を使い、セルのサイズを変更しないでください。そして、HTML内のすべてのセルにCSSのサイズを定義する方がはるかに良い考えです。 – Thodoris