Split a table cell vertically

Programmer Question

I've got an HTML table, where some cells have dynamic content that will change height over time. Let's say I want to have one cell fill the bottom half with one color and the top half with another color. I'd like to do it with HTML/CSS such that as the other cells change height, the color cell will adjust to still be half-and-half (i.e., each color takes half of the new height).

I've tried variations of the following code. If both heights are 50% then I only see two colored dots. If both heights are 50px then A) I don't think it will adjust, and B) It's too tall for the current neighbor.

  
1
2
  

    





  

Is there an easy trick to do this? Note that my final solution only needs to have a 1px vertical line, of half the cell height - so I could use a border, or background color, or even create a graphic if it would help. Oh, and I'm targeting multiple browsers.

Thanks in advance.

Find the answer here