Größe der Tabellenzellen beim Zoomen im Browser

Bei der Anzeige meiner Tabelle in Chrome ändert die Tabelle beim Zoomen die Zellengröße. Die Tabelle wird in anderen Browsern (IE, Firefox) auch falsch angezeigt. Ich habe bereits versucht, die Größen auf Prozent zu ändern, schien nicht zu funktionieren.

Dies ist, wie es aussehen soll (Arbeiten in Chrome beim Zoomen 90%): correct table

Hier in jsfiddle mein Code

Größe der Tabellenzellen beim Zoomen im Browser

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

(wie es nicht aussehen soll)

Danke für Hilfe!

Quelle

2017-08-21 Greplis

Hmm, der Code in der Geige erscheint genau das gleiche wie das Bild, das Sie anfügten, ich weiß nicht, ob es nur ich bin – Mark

Ich würde gerne helfen, aber wenn es ein browserbasiertes Problem ist, tut mir leid, das ist außerhalb meiner Domain – Mark

'min-height' erlaubt die Größenänderung, wenn Sie heranzoomen. Verwenden Sie entweder' height' oder 'max-height' und die Zellen sollten nicht die Größe ändern. Und es wäre eine viel bessere Idee, die Größen in Ihrem CSS statt auf jeder Zelle in HTML zu definieren. – Thodoris

Das Problem war, dass ich padding: 0mm zu td und margin: 0mm zu div nicht angegeben habe. Aus diesem Grund div verinnerlicht die height: 104mm von td und die Größe der neu zu passen div und seine Auffüllung.

Quelle

2017-08-21 16:39:05 Greplis

Größe der Tabellenzellen beim Zoomen im Browser

Antwort

Verwandte Themen