Making numbers display at the top of the HTML table cell they are in

Question

Hello,

I am using a two-column HTML table to display a list of rules. One column has the rule's number, and the other has the rule.

The rule's numbers are displaying near the bottom of the cells they are in. How could I get them to display at the top of the cells they are in?

Thanks in advance,

John

Sample of the table code:

echo "<table class=\"rulestable\">";
    echo '<tr>';
    echo '<td class="sitename1edit2arules">1.</td>';
    echo '<td class="sitename1edit1rules">The quick brown fox jumps over the lazy sleeping dog.</td>';
    echo '</tr>';

    echo '<tr>';
    echo '<td class="sitename1edit2arules">2.</td>';
    echo '<td class="sitename1edit1rules">The quick brown fox jumps over the lazy sleeping dog.</td>';
    echo '</tr>';
echo "</table>";

The CSS:

table.rulestable {
    position:absolute;
    left:30px;
    top:250px;
    text-align: left;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    font-size: 12px;
    color: #000000;
    width: 400px;
    table-layout:fixed;
    background-color: #FFFFFF;
    border: 2px #FFFFFF;
    border-collapse: collapse;
    border-spacing: 2px;
    padding: 1px;
    text-decoration: none;
    vertical-align: top;

}

table.rulestable td {
   border: 2px solid #fff;  
   text-align: left; 
   height: 18px;
   overflow:hidden;

}

table.rulestable td a{
   padding: 2px;
   color: #004284;
   text-decoration: none;
   font-weight: bold;
   overflow:hidden;
   height: 18px;
}

table.rulestable td a:hover{
   background-color: #004284;
   padding: 2px;
   color: #FFFFFF;
   font-weight: bold;
   text-decoration: none;
   overflow:hidden;
   height: 18px;
}   

.sitename1edit2arules { width: 35px;
            overflow:hidden !important;
            color: #000000;
            padding-bottom: 5px;


}

Answer 1

Change:

table.rulestable td {
   border: 2px solid #fff;  
   text-align: left; 
   height: 18px;
   overflow:hidden;
}

To:

table.rulestable td {
   border: 2px solid #fff;  
   text-align: left; 
   height: 18px;
   overflow:hidden;
   vertical-align: top;
}

Demo: http://jsfiddle.net/2ytTT/

Answer 2

You can adjust the line-height property of the cell:

line-height: 30px; /* Insert any height here */

After applying this style, you get vertical-align working correctly.