求助：如何在HTML表格中实现不同样式的文本堆叠

嘿，作为HTML/CSS新手碰到这种表格样式需求太正常了！我来给你简单明了的解决方案——核心思路就是把需要分行的内容用容器包裹，再通过CSS分别设置样式，具体操作看下面：

方法一：用<br>换行 + <span>包裹样式 #

这是最直接的方式，用<br>强制换行，再给两行文本分别加类名来控制样式：

<style>
  /* 第一行标签的样式：小字号、加粗、灰色 */
  .cell-label {
    font-size: 12px;
    font-weight: 700;
    color: #555;
  }
  /* 第二行内容的样式：大一点的字号、常规字重、深灰色 */
  .cell-content {
    font-size: 15px;
    font-weight: 400;
    color: #222;
  }
</style>

<table border="1">
  <tr>
    <th>
      <span class="cell-label">Name:</span><br>
      <span class="cell-content">John Smith</span>
    </th>
    <th>
      <span class="cell-label">Occupation:</span><br>
      <span class="cell-content">Data Scientist</span>
    </th>
  </tr>
</table>

方法二：用<div>自动换行（无需<br>） #

因为<div>是块级元素，放在单元格里会自动换行，这种方式更适合后续可能需要调整布局的场景：

<style>
  .cell-label {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 4px; /* 可以加个间距让两行更美观 */
  }
  .cell-content {
    font-size: 14px;
    font-weight: normal;
  }
</style>

<table border="1">
  <tr>
    <th>
      <div class="cell-label">Name:</div>
      <div class="cell-content">John Smith</div>
    </th>
    <th>
      <div class="cell-label">Occupation:</div>
      <div class="cell-content">Data Scientist</div>
    </th>
  </tr>
</table>

关键说明 #

• 不管用哪种方法，核心都是给不同行的文本单独加容器（<span>或<div>）并设置类名，这样就能精准控制每一行的字号、字重、颜色等样式。
• 你可以完全根据自己的需求修改CSS里的属性，比如调整font-size（字号）、font-weight（字重，数值或bold/normal）、color（颜色）甚至margin（间距）。

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