HTML表格列对齐问题求助：按CSS设置无法实现指定对齐效果

问题描述 #

我用给定CSS代码创建HTML表格，无法实现预期列对齐效果：第1列表头/数据居中；第2列表头/数据左对齐；第3列表头/数据右对齐。最终要做10列，现在先尝试让前3列正常工作。

原代码 #

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 3px;
}

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

/* first tr and then first th (Column 1)*/
table tr:first-child th:first-child {
  text-align: center;
}

/* all cells under the first column */
table tr td:first-child {
  text-align: center;
}

/* first element of the second column (Column 2) */
table tr:first-child th:nth-child(2) {
  text-align: left;
}

/* all cells under the second column */
table tr td:nth-child(2) {
  text-align: left;
}

/* first element of the third column (Column 3) */
table tr:first-child th:nth-child(3) {
  text-align: right;
}

/* all cells under the third column */
table tr td:nth-child(3) {
  text-align: right;
}

HTML代码 #

<table>
  <thead>
    <tr>
      <th>WONo</th>
      <th>Location</th>
      <th>WorkCtr</th>
      <th>Project</th>
      <th>Status</th>
      <th>PFAStart</th>
      <th>PFAFinish</th>
      <th>Budget</th>
      <th>Expense</th>
      <th>Variance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td>Consultant Fees-Cons</td>
      <td></td>
      <td>2024-07-01</td>
      <td>2025-06-30</td>
      <td>800</td>
      <td>800</td>
      <td>0</td>
    </tr>
    <tr>
      <td>9001473202</td>
      <td>WEST</td>
      <td>REFRIGER</td>
      <td>Condenser/DX Coil</td>
      <td>REL</td>
      <td></td>
      <td></td>
      <td>27371.46</td>
      <td>23677.05</td>
      <td>3694.41</td>
    </tr>
    <tr>
      <td>9001475932</td>
      <td>AERO</td>
      <td>REFRIGER</td>
      <td>Replace unit servicing AERO 2</td>
      <td>REL</td>
      <td></td>
      <td></td>
      <td>17841.37</td>
      <td>923.88</td>
      <td>16917.49</td>
    </tr>
  </tbody>
</table>

解决方案 #

原CSS选择器写法冗余，且可能因浏览器默认样式优先级问题导致未生效。可以优化为更明确、简洁的写法，直接针对表头和数据行的对应列设置对齐方式：

修正后的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 3px;
}

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

/* 第1列：表头+数据居中 */
thead th:nth-child(1),
tbody td:nth-child(1) {
  text-align: center;
}

/* 第2列：表头+数据左对齐 */
thead th:nth-child(2),
tbody td:nth-child(2) {
  text-align: left;
}

/* 第3列：表头+数据右对齐 */
thead th:nth-child(3),
tbody td:nth-child(3) {
  text-align: right;
}

说明 #

• 直接用thead th和tbody td定位，避免了tr:first-child的冗余，确保只针对表头和数据行的对应列生效，优先级更明确。
• 这种写法也方便后续扩展第4-10列的对齐规则，只需复制对应格式修改nth-child的序号即可。

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