[SOLVED] HTML how to force vertical-align: bottom

mfoley · 12-12-2019, 11:26 PM

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>

ondoho · 12-13-2019, 01:14 AM

Because id (#) is stronger than class (.).
change
tr.header { vertical-align: bottom }
to
tr#header { vertical-align: bottom }

and
<tr class="header">
to
<tr id="header">

mfoley · 12-13-2019, 03:16 PM

ohdoho: Excellent suggestion. I found another solution, but I like yours better. What I did was:

Code:

<style>
:
:
#MAIN tr.header { vertical-align: bottom }\
:
</style>

which let me keep the <tr class="header"> instead of changing to <tr id="header">

Thanks!