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;"> </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> 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
Post a Comment