Table cell did not change correctly in 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 resizing a page in Firefox, cells maintain a 40:20:40 ratio. When a page changes in Chrome, the relationship changes and the cell with textarea do not change. When "white-space: nowrap"; deleted, resizing works fine.

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

Answer 1

This seems to be a behavior specific to webkit. It seems that webkit does not fully use the relative width specified in percent in the text field, and it uses the pixel value computed from the cols attribute to propagate the parent element to it when the table is automatically aligned. The default cols value is 20.

You can get around using the absolute width of the text field that overrides the computed value from cols, or you can specify the value of the dummy column to 1. However, the best solution is to use table-layout: fixed on your table, which seems to force the table cells to use the specified value in the cells of the table, and not try to calculate based on children.

See the solution here: http://jsfiddle.net/TbQYT/3/

Answer 2

I don’t know why this is happening (I’m studying now, I’ll update this answer if I find why it works this way), but you can fix it by making textarea a block .

 textarea{ display: block; } 

demo

Answer 3

I'm not sure why it doesn't work in Chrome, but you can just override the style in the textarea cell like this:

JSFiddle: http://jsfiddle.net/PyPhk/2/

HTML:

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

CSS

 table tr td { white-space: nowrap; } .textCell { white-space: normal; } 

UPDATE:

After checking the original scripts, you can see that Chrome provides a default style in its own stylesheet: user agent stylesheet

The included styles for the text box include:

 textarea { margin: 0em; font: -webkit-small-control; color: initial; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; } 

A style that impedes your desired behavior is display: inline-block . The difference is that other browsers (Firefox) do not define this default style.

Thus, a valid fix overrides this, as @prisoner suggests, although you assume it has flaws.

 textarea{ display: block; } 

You can either stick to my work, which redefines the style at the table cell level, or you can define a class specifically for this text field using display: block; applied to it, so the "flaws" that you think of do not apply to all text areas.

Answer 4

It seems to me that Chrome has a minimum size for text fields by default. Even using the built-in corner, the size will not be lower than a certain height and width.