如何将文本刷新到表格单元格的顶部/底部

时间:2013-07-09 23:55:28

标签: html css html-table markup w3c

我有一个带有文本的表格单元格,但是如何让文本刷新到单元格的顶部或底部(上面没有填充)?我已经尝试过纵向对齐,但它仍然不是顶级'边缘'。

我的代码

<table>
    <tr>
        <td class="foo">3.2325</td>
        <td class="bar">4.5931</td>
    </tr>
</table>

table {
    border-bottom: 2px solid black;
    border-collapse: collapse;
}
table td {
    border-top: 1px solid black;
    border-collapse: collapse;
    background-color: pink;
    padding: 0 10px 10px;
}
.foo {
    font: bold 30px arial;
    border-right: 1px solid black;
    vertical-align: top;
}
.bar {
    font: normal 16px arial;
}

JSfiddle示例:http://jsfiddle.net/KznxN/2/

1 个答案:

答案 0 :(得分:0)

取决于您是希望更多还是更高,根据

调整“行高”

示例:

. {foo
     font: bold 30px arial;
     border-right: 1px solid black;
     vertical-align: top;
     line-height: 24px;
}

但要注意,最好修复细胞的高度