Strange behavior when setting "padding-top" for the content of a "table-cell" div

Can someone explain this behavior to me?

take this code:

<div style="position:relative; width:960px; margin-left:auto; margin-right:auto; ">
    <div style="background-color:pink;">
        <div style="display:table-cell; padding:10px; width:299px; border-right: solid 1px #f0f0e7; background-color:BlueViolet;">
            <div>TEST#1</div>
        </div>
        <div style="display:table-cell; padding:10px; width:299px; border-right: solid 1px #f0f0e7; background-color:Purple;">
            <div>TEST#2</div>
        </div>
        <div style="display:table-cell; padding:10px; width:299px; border:none; background-color:Purple;">
            <div><div style="padding-top:100px; background-color:Yellow;"&开发者_开发技巧gt;TEST#3</div></div>
        </div>
    </div>
</div>

Note that the last <div /> has the padding-top

Although only this one has it, all preceding <div /> are having the padding.

why is this? Is there a way to prevent padding to being applied to the other divs while being applied to only the concerned div?

Thank you, René

Because that's how tables work! Every cell in row will always be the same height, just like every cell in a column would be the same width.

If you expect this behaviour but would just like the text to be as high as it can be, add the style

vertical-align: top;

to the divs, as this shows.

Remember, too, that if you're going to be displaying tabular data, you should just use a regular table.