CSS table not align images properly

Question

I'm using CSS table to create a responsive layout and to align images horizontally. All the images will resize horizontally when I resize the screen size.

But the problem is the image on the right hand side will never align itself, if you take a look at my pen: http://codepen.io/vincentccw/full/IlHfj/

Clearly you can still see the a very thin red line on the top right image, what made it even worst is if I resize them slowly, the whole image start to wobble.

Is there a workaround for this?

Answer 1

Your images are not lining up because even though you have given the cells the same width, due to the way tables are rendered (and the number of decimal places you have used) your right cell is slightly thinner than your left cell making that image slightly shorter (resulting in the red line)

You can either add vertical-align:top to your cells (to stop the wobble) or make sure that the left and right cells are going to be the same width by removing the width for the middle column: http://codepen.io/anon/pen/pzrvc