Блог

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

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

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

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

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

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

Затем оформите их как свою таблицу. Использование divs даст вам максимальный контроль над их высотой по отношению к текстовой области