html - 垂直拆分表格单元格

Question

我有一个 HTML 表格，其中一些单元格具有会随时间改变高度的动态内容。假设我想让一个单元格用一种颜色填充下半部分，用另一种颜色填充上半部分。我想用 HTML/CSS 来做到这一点，这样当其他单元格改变高度时，颜色单元格将调整为仍然是一半对半(即，每种颜色占据新高度的一半)。

我尝试了以下代码的变体。如果两个高度都是 50%，那么我只会看到两个彩色点。如果两个高度都是 50px，那么 A) 我认为它不会调整，并且 B) 对于当前的邻居来说它太高了。

<table border="1">
<tr>
  <td>1<br />2</td>
  <td>
    <table border="1">
      <tr>
        <td style="background-color: Blue; height: 50%" />
      </tr>   
      <tr>
        <td style="background-color: Red; height: 50px" />
      </tr>
    </table>
  </td>
</tr>
</table>

有没有简单的技巧可以做到这一点？请注意，我的最终解决方案只需要有一条 1px 的垂直线，即单元格高度的一半 - 所以我可以使用边框或背景颜色，甚至可以创建一个图形(如果有帮助的话)。哦，我的目标是多个浏览器。

Answer 1

我认为你需要决定父表的大小来像这样分开一半。

<table border="1" style="height:100px">
<tr>
 <td rowspan="2">1<br />2</td>
 <td style="background-color: Blue; height: 50%" />   
</tr>
<tr>
 <td style="background-color: Red; height: 50%" />
</tr>
</table>