Table border not aligned top or bottom

Question

Have the following problem example .

The problem is that because of the border in the right td , a white line appears in top and the bottom.

I would like to have:

• The black borders align at the bottom.

• The green goes until to the top

• AND if possible, the solution not depend on borders size (for example if increase the border instead of 2px to 5px or increase the
  content inside the < td >)

Thanks

UPDATE :

This is the same example2 but just increase the border from the TD , you can see that green doesn't go to the top and the bottom left border is not align with the right bottom.

Answer 1

border-collapse property causing to this.

Table style

table{border-collapse:seperate}

example: http://jsfiddle.net/TTw97/10/

Answer 2

You are missing style="border: 2px solid black" from some of your elements.