如何将带有rowspan属性的<td>元素内容设置为顶部对齐？

嘿，要让带rowspan属性的<td>内容顶部对齐，只需要给这个<td>加上CSS的vertical-align: top属性就行啦！默认情况下浏览器会把跨多行的单元格内容垂直居中，所以我们要手动修改这个样式来实现顶部对齐。

方法1：内联样式快速生效 #

直接在目标<td>标签里添加style属性，适合快速测试或单个单元格的场景：

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Savings for holiday!</th>
  </tr>
  <tr>
    <!-- 给带rowspan的td添加顶部对齐样式 -->
    <td rowspan="2" style="vertical-align: top;">
      <div>January</div>
      <div>test</div>
      <div>test</div>
    </td>
    <!-- 补充空td让表格结构完整（原代码这里缺失，会导致渲染异常） -->
    <td></td>
    <td></td>
  </tr>
  <tr class="rowsl">
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

方法2：CSS类统一控制 #

如果有多个需要顶部对齐的跨行列单元格，建议定义一个可复用的CSS类，方便统一管理样式：

/* 可放在<style>标签或外部CSS文件中 */
.cell-top-align {
  vertical-align: top;
}

然后在<td>中引用这个类：

<td rowspan="2" class="cell-top-align">
  <div>January</div>
  <div>test</div>
  <div>test</div>
</td>

另外提个小细节：你原代码里的第一行<tr>只有一个带rowspan="2"的<td>，剩下的列没有对应单元格，浏览器可能会渲染出异常的表格结构，建议补充空的<td>或者调整行结构，就像上面示例里那样，保证表格的行列对应关系正确~

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