在html表格中等高缩放单元格 [英] Equal-height scaling cells in an html table

问题描述

当我做这样的设计时，我遇到了HTML表格的一些麻烦：
左边的单元格是一个rowspan =2单元格，右边的两个单元格使用height =50％属性。
以下是预期的行为：

I'm having some trouble with HTML tables when I make this design: The left-hand cell is a rowspan="2" cell, and the right two are using height="50%" attributes. Below is the expected behavior:

    +-------------+-----------------+
    |             |                 |
    |             |   Equal-height  |
    |             |   cell #1       |
    |             |                 |
    | Scaling-    +-----------------+
    | height cell |                 |
    |             |   Equal-height  |
    |             |   cell #2       |
    |             |                 |
    +-------------+-----------------+

实际发生的事情：

What actually happens:

    +-------------+-----------------+
    |             |   Equal-height  |
    |             |   cell #1       |
    |             +-----------------+
    |             |                 |
    | Scaling-    |                 |
    | height cell |   Equal-height  |
    |             |   cell #2       |
    |             |                 |
    |             |                 |
    +-------------+-----------------+

总之，右边两个单元格的顶部尽可能缩小，最下面的单元格填充剩下的空间。有一个使用嵌入表的丑陋解决方法，但我想知道是否有更优雅的解决方案。
这也可以通过假定左侧单元的固定高度并强制右侧单元的大小（以像素为单位）来规避。然而，这破坏了缩放高度单元格的目的。

In short, the top of the right-hand two cells is reduced as small as possible, and the bottom one fills the rest of the space. There is an ugly workaround using embedded tables, but I was wondering if there was a more elegant solution. This can also be circumvented by assuming a fixed height for the left-hand cell, and forcing the size (in pixels) for the right-hand cells. This defeats the purpose of a scaling-height cell, though.

推荐答案

要使用高度：50％标记，表格需要有一个高度。再次，问题在于由于左侧的元素是任意大小的。因此，如果左侧的文本小于150像素，则固定高度（例如150像素）可能会成为问题。因此，设置一个0像素的高度表解决了这个问题。

To use the height:50% tag, the table needed to have a height. Again, the problem was to due with the element on the left being arbitrarily-sized. So, a fixed height (say 150px) might be a problem if the text on the left was less than 150 px. Thus, setting a 0px height table solved this problem.

<table height="0px" border="1px">
  <tr>
    <td rowspan="2">
      Blah<br>
      Blah<br>
      Blah<br>
      Blah<br>
      Blah<br>
      Blah<br>
      Blah<br>
      Blah<br>
    </td>
    <td height="50%">
      Text
    </td>
  </tr>
  <tr>
    <td height="50%">
      More text
    </td>
  </tr>
</table>

这篇关于在html表格中等高缩放单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！