上标 <sup> 影响表格对齐答案

【问题标题】：Superscript <sup> affecting table alignment上标 <sup> 影响表格对齐
【发布时间】：2017-09-28 02:35:34
【问题描述】：

为什么表格数据元素会导致前一行未对齐？

<table>

正常工作：http://jsfiddle.net/WH3uz/2
不处理数据：http://jsfiddle.net/NCs8H/

【问题讨论】：

嘿@Andre 我想你想要这个jsfiddle.net/WH3uz/3

标签： html css html-table css-float superscript

【解决方案1】：

习惯了

在你最后的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

【讨论】：

我最终使用了更新演示的轻微变化，我仍然将价格保存在它自己的 td 单元格中（因此我可以设置它和名称之间的边距），但这是一个可行的解决方案。感谢您的帮助。

【解决方案2】：

每秒<td> 的宽度相同（这是表格的原则），因此第一行的宽度与第二行的宽度相同...

一张图抵千言：http://jsfiddle.net/NCs8H/1/

要解决此问题，您可以使用数据将 <td colspan="3"> 设置为您的 td。

【讨论】：

这是一个可行的解决方案，但是上面的解决方案不依赖于设置 colspan。谢谢！