將數字顯示在HTML表格單元格的頂部

Question

我正在使用兩列HTML表格來顯示規則列表。一列有規則編號，另一列有規則。

規則的數字顯示在它們所在單元格的底部附近。我怎樣才能讓它們顯示在它們所在單元格的頂部？

由於提前，

約翰

表的代碼示例：

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

的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

變化：

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

要：

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

演示：http://jsfiddle.net/2ytTT/

Answer 2

您可以調整細胞的line-height屬性：

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

應用該樣式後，你會得到垂直對齊正常工作。