如何不使用class，用CSS实现HTML表格文本左对齐、数字右对齐？

方法一：按列位置指定对齐（适合列固定的场景） #

如果表格里数字列的位置是固定的（比如示例中的前两列），直接通过列序号设置对齐规则即可，兼容性拉满：

/* 表头统一左对齐 */
table th {
  text-align: left;
}

/* 第1、2列（数字列）设为右对齐 */
table td:nth-child(1),
table td:nth-child(2) {
  text-align: right;
}

/* 第3列及以后（文本列）保持左对齐 */
table td:nth-child(n+3) {
  text-align: left;
}

方法二：根据单元格内容自动判断（适合列不固定的场景） #

如果数字可能出现在任意列，可以用CSS的:contains()伪类匹配数字相关字符（负号、小数点、0-9），自动识别数字单元格并设置右对齐：

/* 所有单元格默认左对齐 */
table th, table td {
  text-align: left;
}

/* 匹配包含数字、负号或小数点的单元格，设为右对齐 */
table td:where(
  :contains("-"),
  :contains("."),
  :contains("0"), :contains("1"), :contains("2"),
  :contains("3"), :contains("4"), :contains("5"),
  :contains("6"), :contains("7"), :contains("8"),
  :contains("9")
) {
  text-align: right;
}

注意事项 #

• :contains()伪类需要Chrome 105+、Edge 105+、Safari 15.4+版本支持，旧浏览器无法使用。
• 如果单元格同时包含数字和文本（比如"123 示例文本"），这个方法会把整个单元格设为右对齐，纯CSS无法单独区分内容里的数字和文本，这种场景需要配合JavaScript处理。

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