将数字显示在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 */ 

应用该样式后，你会得到垂直对齐正常工作。