Question

Look at this table:

<div style="position: absolute; right:0; top:0; width:100px;">
    <table style="width: 100%; border-bottom: white 1px solid">
      <tr>
        <td>X:</td>
        <td><input type="text" style="width:100%"/></td>
        <td>Y:</td>
        <td><input type="text" style="width:100%"/></td>
        <td>Z:</td>
        <td><input type="text" style="width:100%"/></td>
      </tr>
    </table>
</div>

http://jsfiddle.net/MDLMz/2/

Input field widths are equal in Firefox, but right and middle one are smaller in Chrome.

I have no idea this happens, no clue whatsoever.

Do you know any solutions to fix this in Chrome?

Answer 1

I have solved this, i shouldn’t leave it unanswered. Someone might find this answer useful.

Issue was about how webkit render order.
table cell rendered first is bigger than one after, if i leave width as auto.

Firefox and Opera parses whole table than evenly distributes available width.
which is correct way in my opinion.

Chrome fix is to use percentages every element in table.
Don’t leave any auto values.

<table style="width: 100%">
      <tr>
        <td style="width:10%">X:</td>
        <td><input type="text" style="width:90%"/></td>
      </tr>
</table>

now there is no need to give up on tables or use absolute pixel sizes.