如何为DataTables固定列的最后一列添加样式？

CSS 实现方案 #

你的原选择器无效的原因是：td.dtfc-fixed-left:last-child 要求目标元素既是 dtfc-fixed-left 类，同时又是 <tr> 的最后一个子元素，但实际场景中 <tr> 的最后一个子元素是不带固定类的普通列，所以无法匹配。

可以使用 :has() 伪类选择器 精准定位每个 <tr> 内最后一个带 dtfc-fixed-left 类的 <td>：

/* 选中每个tr内最后一个dtfc-fixed-left的td */
td.dtfc-fixed-left:not(:has(+ .dtfc-fixed-left)) {
  /* 右侧阴影效果，提示下方有内容 */
  box-shadow: 5px 0 8px -3px rgba(0, 0, 0, 0.2);
  /* 可选：确保阴影不被内容遮挡 */
  position: relative;
  z-index: 1;
}

/* 同时处理表头的固定列 */
th.dtfc-fixed-left:not(:has(+ .dtfc-fixed-left)) {
  box-shadow: 5px 0 8px -3px rgba(0, 0, 0, 0.2);
}

兼容性说明 #

:has() 伪类目前已被 Chrome、Firefox（版本121+）、Safari 等现代主流浏览器支持。如果需要兼容旧版浏览器，可以采用以下备选方案：

备选 JS 方案（仅当CSS无法兼容时使用） #

如果必须支持不兼容:has()的浏览器，可以通过简单的JS逻辑批量添加标记类：

// 遍历所有tr，给每个tr内最后一个dtfc-fixed-left元素加类
document.querySelectorAll('tr').forEach(tr => {
  const fixedCells = tr.querySelectorAll('.dtfc-fixed-left');
  if (fixedCells.length > 0) {
    fixedCells[fixedCells.length - 1].classList.add('dtfc-fixed-left-last');
  }
});

// 监听ColVis切换事件（DataTables的列可见性变化），重新执行上述逻辑
$('#your-table-id').on('column-visibility.dt', function() {
  document.querySelectorAll('tr').forEach(tr => {
    // 先移除旧的标记类
    tr.querySelectorAll('.dtfc-fixed-left-last').forEach(el => el.classList.remove('dtfc-fixed-left-last'));
    const fixedCells = tr.querySelectorAll('.dtfc-fixed-left');
    if (fixedCells.length > 0) {
      fixedCells[fixedCells.length - 1].classList.add('dtfc-fixed-left-last');
    }
  });
});

然后用CSS选中这个标记类：

td.dtfc-fixed-left-last,
th.dtfc-fixed-left-last {
  box-shadow: 5px 0 8px -3px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

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