Multiple input fields inside td width issue

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?

mikbal · Accepted Answer · 2012-11-05 04:22:00Z

2

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.

answered Nov 5, 2012 at 4:22

mikbal

1,2082 gold badges18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple input fields inside td width issue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related