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

Question

How can i perfectly align text to the top of a table cell? By perfectly, I mean that the top of the letters touch the border of the table cell.

An additional difficulty in my case is that I need to use a large line height (approximately double the font height). As a result, there's is a considerable space between the top of the letters and the cell border because the difference between the font height and the line height is distributed equally to both the top and bottom of the text (so called half-leading ).

I've setup a 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

How about wrapping necessary text in some spans and adding negative position/margin, like

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

Fiddle

But for a good readability, you'd rather don't need to remove space at top (imho) Look, the text at left side looks better.

Answer 2

If you changed your html to:

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

adding <span> tags Then you can go:

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

Hope this helps

Answer 3

Demo

The issue is because of the line-height

You can change the line-height of the first line by using the selector :first-line like

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

Answer 4

I have a solution but it goes with JS, not pure CSS only.

HTML (added the 'span' tag inside 'td'):

<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/