如何使用CSS为HTML表格的最后一列设置差异化样式？

嘿，要实现给表格最后一列单独设置样式的需求，其实有几种简单直接的CSS方案，我给你拆解清楚：

方法1：用:last-child选择器（最通用） #

这个选择器能精准选中每一行里的最后一个单元格——不管是表头的<th>还是内容行的<td>，不用额外加类名，非常省心。你只需要在现有CSS里添上这段：

/* 选中每一行的最后一个单元格 */
tr > :last-child {
  /* 这里替换成你想要的样式，举个例子： */
  background-color: #f5f5f5;
  border-left: 2px dashed #999;
  font-style: italic;
}

方法2：用:nth-last-child(1)选择器（更灵活） #

和上面的效果完全一致，但写法更适合需要选倒数第N列的场景（比如要选倒数第二列就把1改成2）。代码如下：

tr > :nth-last-child(1) {
  /* 自定义样式示例 */
  color: #d9534f;
  border-bottom: 1px dotted #666;
}

方法3：针对现有类名定制（如果要区分表头和内容） #

你的表头最后一列已经有th3类了，要是想给表头最后一列和内容最后一列分别设置不同样式，可以这么写：

/* 单独给表头最后一列加样式 */
.th3 {
  font-weight: bold; /* 覆盖原来的normal属性 */
  color: #5bc0de;
}
/* 给内容行的最后一列加样式 */
tr > td:last-child {
  background-color: #fff3cd;
}

完整代码示例（以方法1为例） #

把新增的样式整合到你的现有代码里，完整CSS是这样的：

table { border-collapse: collapse; border-right: 0px; border: 1px solid; }
td { border: 1px solid; }
thead { border: 2px; }
th.th { border: solid; }
th.th3 { border-top: 1px dashed; font-weight: normal; }

/* 新增的最后一列样式 */
tr > :last-child {
  background-color: #f5f5f5;
  border-left: 2px dashed #999;
}

这样就能轻松让最后一列和其他列区分开来啦，你可以根据自己的需求调整颜色、边框这些样式属性~

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