CSS多列表格对齐求助：配置三列表格表头及单元格对齐方式

你的代码核心问题是伪类选择器和前面的元素之间多了空格，比如: first-child这种写法是错误的——CSS伪类选择器需要紧跟在元素选择器后面（无空格），否则会被解析为后代选择器，导致样式完全无法生效。

同时可以优化代码结构，把同一列的表头（th）和单元格（td）样式合并，减少重复代码，提升可维护性。

修正并优化后的CSS代码 #

table {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eeeeee;
  border-collapse: collapse;
  width: 100%;
}

table td,
table th {
  font-size: 10px;
  border: 1px solid #ddd;
  padding: 3px;
}

table th {
  font-weight: bold;
  padding-top: 6px;
  padding-bottom: 6px;
  background-color: #00b0f0;
  color: white;
}

/* 第一列：表头和单元格居中 */
table th:first-child,
table td:first-child {
  text-align: center;
}

/* 第二列：表头和单元格左对齐 */
table th:nth-child(2),
table td:nth-child(2) {
  text-align: left;
}

/* 第三列：表头和单元格右对齐 */
table th:nth-child(3),
table td:nth-child(3) {
  text-align: right;
}

关键调整说明 #

1. 修复伪类语法：移除:first-child、:nth-child()前的空格，确保选择器能正确匹配目标元素
2. 合并同列样式：将每个列的表头和单元格选择器合并，避免重复编写相同的text-align规则
3. 简化冗余代码：把padding: 3px 3px简化为padding: 3px，效果一致且更简洁

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