Superscript <sup> affecting table alignment

Question

Why is a table-data element causing a misalignment of the previous row?

<table>

working as it should: http://jsfiddle.net/WH3uz/2
Not working with data: http://jsfiddle.net/NCs8H/

Answer 1

Used to

    in your last td <td colspan="3">

=====

<table class="menu-item">
<tr>
    <td class="num">14.</td>
    <td class="fdname"> Greens</td>
    <td> <sup class="gf-vg"> GF / VG</sup></td>
    <td class="price">$4.75</td>
</tr>
<tr>
    <td></td>
    <td colspan="3">Romaine lettuce, purple cabbage, pickled beets, and fresh cilantro, drizzled with our house vinaigrette.</td>
<tr>    
</table>

Demo

Update Demo

Answer 2

Every second <td> have the same width (it's the principe of a table), so the first line has the same width than the second...

A picture is worth a thousand words: http://jsfiddle.net/NCs8H/1/

To fix this, you can set <td colspan="3"> to your td with data.