Text with non-breaking hyphen not aligned in tables

Question

Something weird: when adding a non-breakable hyphen to a string in a HTML table cell, the text becomes unaligned with the other cells:

<table><tr><td>aligned</td><td>aligned-with normal hyphen</td></tr><tr><td>aligned</td><td>un&#8209;aligned with non breakable hyphen (&#8209;)</td></tr></table>

Here is a JSFiddle for this.

Any explanation/fix for this?

Answer 1

The vertical height of that character is different for some reason. If you set the vertical align it will help it look better, but it won't change the height of your content. It may be a peculiarity of the font.

https://jsfiddle.net/1yz4mngh/14/

Html

<table>
    <tr><td>-</td></tr>
    <tr><td>&#8209;</td></tr>
</table>

Css

td {
    background: #cccccc;
    vertical-align: text-bottom;
}

Answer 2

Vertical align is acting wonky. This should fix it.

td { vertical-align: text-top; }