Идеально выровнять текст в верхней части ячейки таблицы

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

Но для хорошей читаемости, вы бы лучше не надо удалите место на верху (imho) Look, Текст на левой стороне выглядит лучше.

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 (добавлен 'поверочного' метки внутри 'тд'):

<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 
    }); 
}); 

Полный jsfiddle: http://jsfiddle.net/jondinham/p8g1cx6b/