HTML how to force vertical-align: bottom
by mfoley from LinuxQuestions.org on (#4WGK6)
I have the html shown below. There is a table within a cell of a parent table. The style for the row on the inner table has a class with vertical-align: bottom, but it does not take. It aligns at top, like the parent table's row style. Why? How do I fix this?
Code:<!DOCTYPE html>
<html>
<head>
<style>
#MAIN { width: 200px }
#MAIN tr { vertical-align: top }
tr.header { vertical-align: bottom }
th { border: 1px solid black }
</style>
</head>
<body>
<table id="MAIN">
<tr>
<td>
<table>
<tr class="header">
<th>the</th><th>rain<br/>in</th><th>Spain</th>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Code:<!DOCTYPE html>
<html>
<head>
<style>
#MAIN { width: 200px }
#MAIN tr { vertical-align: top }
tr.header { vertical-align: bottom }
th { border: 1px solid black }
</style>
</head>
<body>
<table id="MAIN">
<tr>
<td>
<table>
<tr class="header">
<th>the</th><th>rain<br/>in</th><th>Spain</th>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>