Affichage des nombres en haut de la cellule du tableau HTML dans laquelle ils se trouvent

Question

J'utilise un tableau HTML à deux colonnes pour afficher une liste de règles. Une colonne a le numéro de la règle et l'autre la règle.

Les numéros de règles s'affichent près du bas des cellules dans lesquelles ils se trouvent. Comment puis-je les faire afficher en haut des cellules dans lesquelles ils se trouvent?

Merci à l'avance,

John

Exemple du code de table:

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>"; 

Le 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; 
} 

Pour:

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

Démo: http://jsfiddle.net/2ytTT/

Answer 2

Vous pouvez régler la propriété line-height de la cellule:

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

Après avoir appliqué ce style, vous obtenez vertical-align fonctionne correctement .