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: 30px; /* Insert any height here */

应用此样式后，您可以使vertical-align正常工作。

使数字显示在它们所在的HTML表格单元格的顶部

2 个答案: