如何在移动端视图中将右对齐的td元素设置为顶部对齐

直接通过CSS媒体查询限定移动端断点，给目标td元素同时设置水平对齐、垂直对齐属性即可，无需改动现有表格HTML结构，不会影响桌面端原有展示效果。

核心实现代码 #

以常见的768px移动端断点为例，样式只在屏幕宽度小于768px时生效：

@media screen and (max-width: 767px) {
  /* 匹配现有结构下的表格单元格 */
  .s-table tbody td {
    text-align: right; /* 水平右对齐 */
    vertical-align: top; /* 垂直顶部对齐 */
  }
}

场景适配调整 #

• 如果仅需要给指定类名的右对齐单元格加效果，缩小选择器范围即可，比如给需要右对齐的td加col-right类，对应选择器写为.s-table td.col-right
• 如果原有样式优先级较高导致规则不生效，可以提升选择器权重，比如写为.s-table-container .s-table tbody td
• vertical-align属性仅对td/th等表格单元格元素生效，不要将该属性写在table、tr等父元素上，不会产生继承效果
• 如果需要单元格内容完全贴顶，可以搭配padding-top: 0使用，抵消表格默认的单元格内边距

临时单元素调整方案 #

如果是单个单元格特殊调整，也可以直接写内联样式，但维护成本高，不建议批量使用：

<td style="text-align: right; vertical-align: top;">单元格内容</td>

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