Table cell not resized correctly on Google Chrome

Question

We have a table:

<table style="width: 100%; border: 2px solid black;">
    <tr>
        <td style="width: 40%; height: 20px;">
            ABC
        </td>
        <td style="width: 20%; height: 20px;">
            <textarea style="width: 100%;"></textarea>
        </td>
        <td style="width: 40%; height: 20px;">
            DEF
        </td>
    </tr>
</table>

You can see it here(http://jsfiddle.net/PyPhk/).

When page is resized in Firefox, cells keep 40:20:40 ratio. When page is resized in Chrome, ratio changes and cell with textarea is not being resized. When "white-space: nowrap;" is removed, resizing works fine.

Why Chrome doesn't keep ratio when resizing with "white-space: nowrap"?

Answer 1

It looks like it's a behavior specific to webkit. It' seems like webkit does not fully use the relative width specified with percentage on the textarea and it's using the pixel value calculated from the cols attribute for propagation to it's parent when auto aligning the table. Default cols is 20.

You can work around using an absolute width of the textarea that overrides the calculated value from cols or you can specify a dummy cols value of 1. However, the best solution is to use table-layout: fixed on your table that seems to force the table cells to use the specified value in the table cells rather than trying to calculate based on child elements.

Check out the solution here: http://jsfiddle.net/TbQYT/3/