如何在HTML表格单元格中实现Emoji与文本的行内对齐

排版异常的触发原因 #

• 宽度分配失衡：表格总宽度设为285px，第一个td被强制设置275px宽度，留给第二个td的可用显示空间仅10px，远小于单个emoji字符的自身宽度，必然会将后续数字内容挤压换行。
• DOM结构错误：第二个块冗余添加了一个闭合</td>标签，会打乱浏览器对表格结构的解析逻辑，进一步加剧排版错位。
• 冗余样式干扰：给td手动设置display:inline-block，会破坏表格单元格默认的排版规则，无实际增益反而容易触发异常折行。

可直接替换的正确代码 #

<table align="left" class="deftable" style="margin-bottom:20px; width:285px !important;">
  <tr>
    <td style="white-space: nowrap;">Banana's in store: </td>
    <td style="white-space: nowrap;">
      &#127820;<?= htmlspecialchars(number_format($obj['bananas'],0,",",".")) ?>
    </td>
  </tr>
</table>

调整说明 #

• 移除了不合理的强制宽度设置，让两个td按照自身内容长度自动分配表格内的显示宽度，避免出现可用空间不足的问题。
• 为两个单元格添加white-space: nowrap样式，强制单元格内的emoji、文本内容不自动折行，保证所有内容在同一行显示。
• 删除了冗余的闭合标签与无效的行内块样式，修正DOM结构，保障浏览器对表格排版的正常解析。

内容的提问来源于stack exchange，提问作者newusertomysqli12