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