While trying to display my table in Chrome, I noticed that the cell sizes of the table change when zooming in. Additionally, the table is rendered incorrectly in other browsers like IE and Firefox. I attempted adjusting the sizes to percentage values but it did not resolve the issue.
This is the desired appearance (Chrome at 90% zoom):
correct table
Here is the code on jsfiddle (the incorrect rendering)
<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_even">
<td style="min-height: 9.30mm; max-height: 9.30mm;">
...
</td>
</tr>
...
</table>
Appreciate any assistance!