垂直拆分表格单元格

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>