ここでは非常に単純なことをしようとしています。テキストが含まれているテーブルセルの下部にテキストを表示したいだけですが、htmlタグ自体ではなく、CSSでそれを行いたいです。
以下に示すコードが機能しないのはなぜですか? 以下の例では、テキストはセルの下部ではなく中央に表示されます。なんで?
<style type="text/css">
.myClass2 {
color:red;
font-weight:bold;
font-style:italic;
vertical-align:text-bottom;
text-align: center;
}
</style>
<table bgcolor="black" border="1">
<tr>
<td bgcolor="white" class="myClass1" width="300">
<div class="myClass2">
Why won't this align at the bottom?
</div>
</td>
<td height="100" bgcolor="white">
Something very tall here.
</td>
</tr>
</table>