Strange top margin in other cells when IMG tag is first in a CSS table cell

I have noticed this bug several times when programming and wonder if anybody has a work around. When I create a CSS table using the display:table property, if one of my cells contains an IMG as the first element, the text in the adjacent cell begins below that image's height. If I put any text before the image tag, then the text in the next cell displays normally.

I have also noticed that if the display property of the IMG is block, then the text in the next cell begins below the image, but if the IMG is set to display:inline, then the text next door aligns it's baseline with the baseline of the image.

Ideally, I 开发者_StackOverflow中文版would like all content to begin at the top of each cell, and sometimes I would like to start a column with an image.

When I create a CSS table using the display:table property

You're having this problem because the default vertical-align is baseline for divs (which I assume you're using).

To fix it, simply also specify vertical-align: top on whatever has display: table-cell.