Кросс-браузерное согласованное масштабирование строк

Question

Допустим, у меня есть таблица из двух столбцов и трех строк. Теперь, в левом столбце у меня есть содержимое в каждой строке, но в правом я помещаю элемент <textarea> с 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>

В большинстве современных браузеров вы можете изменить размер этой текстовой области, но мне не нужно ограничивать это. Проблема возникает, когда текстовая область увеличивается по вертикали и начинает растягивать таблицу. В Chrome только последний ряд изменяет размеры (желаемое поведение), тогда как в Firefox все они расширяются соответственно.

Есть ли способ установить, какие строки имеют фиксированную высоту, а какие растягиваются?

Answer 1

Я не люблю говорить никогда ... но в этом случае, вероятно, нет кроссбраузер-совместимого способа использования вашего кода

Таблицы предназначены для растяжения, а не для ограничения по высоте, и способ, которым браузеры «пропускают» таблицу для вычисления высоты и ширины ячеек, зависит от каждого браузера - то есть нет жестких и быстрых рекомендаций - в большинстве они, при первом проходе по таблице, нажимают на этот интервал строк и вычисляют высоту всей таблицы из текстовой области внутри него, а затем делят фактические строки на равные, что требует меньше разбора таким образом, что вы можете себе представить, если бы это была большая длинная таблица с несколькими число строк в таблице не будет отображаться очень быстро, если браузеру придется возвращаться к таблице, чтобы заново отрегулировать высоту строк

В любом случае, говоря все о том, что надежное кросс-браузерное решение состоит в том, чтобы не использовать интервал строк, а вместо этого вкладывать таблицу (yuk;)) в первую ячейку, которая затем содержит ваши 3 строки ... или вы можете просто поместить три деления внутри первой ячейки для имитации ваших строк, например

<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>

Тогда придумайте им стиль, как ваш стол. Использование div даст вам полный контроль над их высотой по отношению к текстовой области