如何在左对齐表头的表格单元格内，使数字在对应表头Div下方居中？

嗨，我完全get你的需求了——你要的是表头文字保持左对齐，数字精准对齐在对应表头文字的正下方居中，而不是让数字在整个td单元格里居中对吧？

首先说结论：不需要用th标签，th的作用是定义表格的表头单元格（比如表格第一行的独立表头），但你的结构是每个td里同时包含表头文本和数据，用CSS调整内部元素的布局才是更适配的方案。

具体实现步骤 #

我们可以给每个td内的表头和数字包裹一个容器，通过这个容器来控制两者的对齐关系：

1. 添加CSS样式，定义容器的行为：

table, th, td {
  border: 1px solid black;
}
.stat-container {
  /* 容器宽度由表头文字自动撑开，不占满整个td */
  display: inline-block;
  /* 表头文字保持左对齐 */
  text-align: left;
}
.stat-container > div:last-child {
  /* 数字宽度和容器一致，确保在表头正下方居中 */
  width: 100%;
  text-align: center;
}

2. 修改HTML结构，给每个td内的内容添加容器：

<div id="pointsTags">
  <table style="width: 100%;">
    <tr>
      <td>
        <div class="stat-container">
          <div style="font-size: 20px;">Hosted</div>
          <div id="totalHosted" style="font-size: 25px; font-family: Playfair Display,serif">6</div>
        </div>
      </td>
      <td>
        <div class="stat-container">
          <div style="font-size: 20px;">Attended</div>
          <div id="totalAttended" style="font-size: 25px; font-family: Playfair Display,serif">45</div>
        </div>
      </td>
      <td>
        <div class="stat-container">
          <div style="font-size: 20px;">Taught</div>
          <div id="totalTaught" style="font-size: 25px; font-family: Playfair Display,serif">344</div>
        </div>
      </td>
      <td>
        <div class="stat-container">
          <div style="font-size: 20px;">Points</div>
          <div id="totalPoints" style="font-size: 25px; font-family: Playfair Display,serif">0</div>
        </div>
      </td>
    </tr>
  </table>
</div>

原理说明 #

• .stat-container 设置为 inline-block，它的宽度会自动适配表头文字的宽度，不会强制占满td的全部空间；
• 表头文字默认左对齐，完全符合你的要求；
• 数字div设置 width: 100% 并 text-align: center，这样就会精准对齐在表头文字的正下方居中，完美匹配你要的效果。

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