Tailwind CSS：如何将表格单元格内容垂直对齐到行顶部？

你当前的问题出在误用了items-center类——这个类是Flex布局中让子元素垂直居中的属性，这就是内容始终居中的原因。要实现顶部对齐，按以下步骤修改：

• 替换所有items-center为items-start：items-start是Flex布局中让子元素靠容器顶部排列的类，不管容器高度多少，子元素都会从顶部开始布局。
• 给<td>添加align-top类：确保表格单元格本身在传统表格布局规则下，内容垂直对齐顶部，作为双重保障。
• 简化冗余嵌套结构：内层的div和p标签不需要重复添加flex-1和对齐类，除非你有特殊的Flex布局需求。

修改后的代码示例：

<tr className="flex-1 items-start">
  <td className="py-1 pl-1 pr-1 text-sm sm:pl-6 align-top">
    <div className="flex-1 items-start">
      <div className="flex-1">
        <p>title</p>
        <p>
          short multi line sentence about one third the length of the sentence in the next column, I want both cells to align to the top.
        </p>
      </div>
    </div>
  </td>
</tr>

补充说明：如果你的表格是用Flex布局模拟的（tr添加了flex-1），核心就是把控制垂直对齐的items-center全部替换为items-start，这样就能让所有Flex容器内的内容从顶部开始排列，和相邻列的长内容保持顶部对齐。

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