html - Table cells resize when zooming in browser -




when displaying table in chrome, table changes cells size when zooming in. table displayed in wrong way in other browsers(ie, firefox). i've tried changing sizes percentage, didn't seem work.

how should (works in chrome when zooming 90%): correct table

here code in jsfiddle (how shouldn't like)

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

thanks help!

the problem didn't specify padding: 0mm td , margin: 0mm div inside. because of div inhereted height: 104mm of td , size of readjusted fit div , padding.





wiki

Comments

Popular posts from this blog

Asterisk AGI Python Script to Dialplan does not work -

python - Read npy file directly from S3 StreamingBody -

kotlin - Out-projected type in generic interface prohibits the use of metod with generic parameter -