如何将HTML表格首行文本与周边文本基线对齐？

• 核心方案：将表格的display: inline-block替换为display: inline-table，并确保设置vertical-align: baseline（该属性默认值为baseline，可省略），即可实现表格第一行文本与周边文本的基线对齐，无需用div替换表格。

• 修改后的示例代码：

baseline surrounding text here 
<table style="display: inline-table; vertical-align: baseline; background-color: rgba(20,30,40,0.5);">
  <tr><td>align me to baseline</td></tr>
  <tr><td>abc</td></tr>
  <tr><td>def</td></tr>
</table>

• 原理说明：
  • 原代码使用display: inline-block时，行内块元素的基线是其内部最后一行文本的基线，因此周边文本会和表格最后一行的“def”对齐，不符合预期。
  • 改为display: inline-table后，行内表格的基线默认是表格第一行文本的基线，搭配vertical-align: baseline可确保表格第一行与外部文本的基线精准对齐，完全满足需求。

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