2017-08-21 18 views
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;">&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> 

助けてくれてありがとう!

+0

うーん、フィドルのコードは、あなたが添付された画像とまったく同じ表示されます、それはちょうど私が – Mark

+0

私は助けるのが大好きだだ場合、私は知りませんが、それは、ブラウザベースの問題であれば、私はそれがだごめんなさいout of my domain – Mark

+0

'min-height'はズームイン時にサイズ変更を許可します。' height'または 'max-height'を使い、セルのサイズを変更しないでください。そして、HTML内のすべてのセルにCSSのサイズを定義する方がはるかに良い考えです。 – Thodoris

答えて

0

問題は、padding: 0mmtdmargin: 0mmdivが内部に指定されていないことでした。そのため、divにはtdのheight: 104mmが埋め込まれており、divとそのパディングに合わせて再調整されたサイズが再調整されています。

関連する問題