如何用CSS设置HTML表格单元格文本顶部对齐？

以下几种方法都能实现单元格内文本垂直居顶的效果：

• 内联样式（快速单个单元格生效）
  直接在目标<td>或<th>标签里添加style属性，指定vertical-align: top：

  <td style="vertical-align: top;">这里是居顶的文本内容</td>
  

• 内部样式表（全局所有表格生效）
  在HTML的<head>标签内定义CSS规则，让所有表格的单元格统一应用顶部对齐：

  <head>
    <style>
      table td, table th {
        vertical-align: top;
      }
    </style>
  </head>
  

• 类选择器（指定表格生效）
  给目标表格添加自定义class，再针对该class写CSS，避免影响其他表格：

  <table class="top-align">
    <tr>
      <th>标题1</th>
      <th>标题2</th>
    </tr>
    <tr>
      <td>居顶内容</td>
      <td>多行<br>测试<br>文本</td>
    </tr>
  </table>
  
  <style>
    .top-align td, .top-align th {
      vertical-align: top;
    }
  </style>
  

原理说明：多数浏览器默认给表格单元格（td/th）设置了vertical-align: middle，导致文本垂直居中，通过设置vertical-align: top就能覆盖这个默认样式，让内容紧贴单元格顶部。

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