给定高度时表格单元格缩小：100%答案

【问题标题】：table cell shrinks when given height:100%给定高度时表格单元格缩小：100%
【发布时间】：2012-09-02 01:48:08
【问题描述】：

事实上，在 Firefox 中，textarea 浮动在其表格单元格的中间，即使它有 height:100% 并且“左上角”单元格比它需要的大得多。

取消注释标记的 CSS 行并再次运行它。表格单元格没有展开以使用其行的全部高度，而是折叠到文本区域，同时将tr 向下拖动。您可以在边框中看到这一点。

我希望 textarea 及其封闭单元格尽可能高，将“左上”单元格向下推到尽可能小的尺寸，如下所示：

|-------------------------------------|
|Top Left        |Right               |
|----------------|x                   |
||--------------||x                   |
||lorem ipsum   ||x                   |
||              ||x                   |
||              ||x                   |
||              ||x                   |
||              ||x                   |
||              ||x                   |
||              ||x                   |
||              ||x                   |
||              ||x                   |
||              ||x                   |
||--------------||x                   |
|----------------|--------------------|

我该怎么做？谢谢。

附：没有javascript，重要的是表格的整体高度由最右边的单元格动态确定，并且左上角单元格的内容可能会换行，因此无法明确给出左侧单元格的大小。

【问题讨论】：

在 Chrome 中看起来就像你想要的那样。您在哪个浏览器中看到所描述的行为？顺便说一句，您的 CSS 注释语法是错误的。只有/* ... */ 有效。
我真诚地希望您只是将这些表格用于表格数据，而不是用于布局......
Roddy，让我们把教条排除在外。对于某些布局和行为，表格没有替代品。

标签： html css firefox tablelayout

【解决方案1】：

rowspan 搞砸了一切......

我建议的解决方案是修改您的表格，删除该行跨度，因此使用两列：

在左边还有一个两行表格，最上面一个是左边的内容，最下面一个是textarea；在右栏中放置正确的内容：

HTML：

<table border="1">
  <tr>
    <td id="w"><table id="z">
        <tr>
          <td style="height: 1px">top left</td>
        </tr>
        <tr id="x">
          <td id="y"><textarea name="textarea">lorem ipsum dolor sit amet</textarea></td>
        </tr>
      </table></td>
    <td>Right
      <ul>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
        <li>x</li>
      </ul></td>
  </tr>
</table>

CSS：

td {
   vertical-align: top;        
}
textarea
{
    width: 100%;
    height: 100%;
}

#x, #y, #z, #w
{
     height: 100%;
}

示例：http://jsfiddle.net/3TTES/46/

【讨论】：

谢谢。如果没有其他问题，我会（不情愿地）接受这个，但我真正想要的是一个通用的、行跨度友好的解决方案。

【解决方案2】：

这不是完美的解决方案，但是...

你需要告诉表格它的高度，所以它不同于自动。

所以你的小提琴 css 会喜欢这个

textarea, table, #x, #y
{
    height: 100%; 
}

问题是浏览器现在使用它自己的逻辑来设置单元格的高度，你不能用“高度”覆盖它，所以左上角的单元格很大。

#z { height:1px; }

即使您将其设置为 1px，它仍然会自行计算...

小提琴链接： http://jsfiddle.net/c7GNc/

【讨论】：

这不符合底部单元格必须为pushing the "Top Left" cell down to its smallest possible size的约束。