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

我不想说永远不会..但在这种情况下，可能没有使用您拥有的代码的交叉浏览器兼容方式

表格设计为拉伸，不受高度限制，浏览器“传递”表格以计算单元格高度和宽度的方式取决于每个浏览器 - 即没有硬性和快速推荐 - 在大多数情况下他们，在他们第一次通过桌子时，他们正在敲击行进并从里面的textarea计算整个表高度，然后将实际行划分得相等，所以如果这是一个很棒的长桌，你可以想象的解析更少如果浏览器不得不回到桌面上重新调整行高，那么行表将无法快速呈现

无论如何，在说所有强大的跨浏览器解决方案是不使用rowspan，而是在第一个单元格中嵌套一个表（yuk;））然后包含你的3行..或者你可以简单地把第一个单元格内的三个div来模拟你的行，例如

<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将使您能够最终控制与textarea相关的高度

跨浏览器一致的行缩放

1 个答案: