html - 将文本完美对齐到表格单元格的顶部

Question

如何将文本与表格单元格的顶部完美对齐？完美的意思是字母的顶部触及表格单元格的边框。

在我的案例中，另一个困难是我需要使用大行高(大约是字体高度的两倍)。结果，字母顶部和单元格边框之间有相当大的空间，因为字体高度和行高之间的差异平均分布到文本的顶部和底部(所谓的 half-leading )。

我设置了一个 JSFiddle .

<table>
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>NOT PROPERLY ALIGNED TO THE TOP</td>
        </tr>
    </tbody>
</table> 

table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
}
td {
    height: 200px;
    vertical-align: top;
    font-size: 18px;
    line-height: 40px;
    border: solid 1px black;
    background-color: #ddd;    
}

Answer 1

如何在某些跨度中包装必要的文本并添加负位置/边距，例如

span {
 position: relative;
 top: -12px;
}

Fiddle

但为了良好的可读性，您宁愿不需要删除顶部的空间(恕我直言)看，左侧的文字看起来更好。