Question

如何将文本完美地对齐到表格单元格的顶部？完美地说，我的意思是字母的顶部触及表格单元格的边界。

我的另一个困难是我需要使用大线高（大约是字体高度的两倍）。因此，字母顶部和单元格边框之间存在相当大的空间，因为字体高度和行高之间的差异均匀分布到文本的顶部和底部（所谓的{ {3}}）。

<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

但为了获得良好的可读性，您不需要移除顶部的空间（imho）看， enter image description here 左侧的文字看起来更好。

Answer 2

如果您将html更改为：

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

添加<span>个标签然后你可以去：

td span {
    margin-top: -15px;
}

希望这有帮助

Answer 3

<强> Demo

问题在于line-height

您可以使用选择器:first-line（例如

）更改第一行的行高

td:first-line {
    line-height: 10px;    
}

Answer 4

我有一个解决方案，但它适用于JS，而不仅仅是纯CSS。

HTML（在'td'中添加了'span'标签）：

<table>
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>
                <span id="myText">PROPERLY ALIGNED TO THE TOP</span>
            </td>
        </tr>
    </tbody>
</table>

JS：

$(document).ready(function(){
    var span       = $("#myText");
    var lineHeight = parseInt(span.css("line-height"));
    var fontSize   = parseInt(span.css("font-size"));
    var shift      = (lineHeight-fontSize)/2;
    var shiftPx    = "-"+shift+"px";

    //alert(lineHeight);
    //alert(fontSize);

    span.css({
        "position":"relative",
        "top":shiftPx
    });
});

Full jsfiddle：http://jsfiddle.net/jondinham/p8g1cx6b/

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

4 个答案: