Question

Let’s say I have a table of two columns an three rows. Now, In the left column I have content in every row, but in the right one I put a <textarea> element with rowspan="3".

<table>
  <tr><td>row one</td><td rowspan="3"><form><textarea></textarea></form></td></tr>
  <tr><td>row two</td></tr>
  <tr><td>row three</td></tr>
</table>

In most modern browsers you can resize that text area, but I don’t need to constrain that. The problem occurs when text area gets bigger vertically and starts to stretch out the table. In Chrome only the last row resizes (desired behavior), while in Firefox all of them expand respectively.

Is there any way to set which rows have fixed height and which ones stretch?

Answer 1

I don’t like to say never.. but in this case there is probably not a crossbrowser compatible way using the code you have

Tables are designed to stretch, not to be restricted by heights, and the way that browsers “pass over” a table to calculate cell heights and widths is up to each browser – i.e. there’s no hard and fast recommendation – In most of them, on their first pass over the table they’re hitting that rowspan and calculating the whole table height from the textarea inside it then dividing the actual rows equally it takes less parsing that way you can imagine if this were a great long table with multiple rowspans the table wouldn’t render very quickly if the browser kept having to go back over the table to re-adjust row heights

Anyway, in saying all that the robust cross-browser solution is to not use the rowspan, but to instead nest a table (yuk ;)) inside the first cell which then contains your 3 rows.. or you could simply put three divs inside the first cell to simulate your rows e.g.

<table summary="" cellspacing="0">
 <tr>
  <td>
    <div>row one</div>
    <div>row two</div>
    <div>row three</div>
  </td>
  <td><form><textarea></textarea></form></td>
 </tr>
</table>

Then style them like your table. Using divs will give you ultimate control over their heights in relation to the textarea