jQuery Datatables排序列边框样式设置问题：无法实现列轮廓效果

嘿，这个问题我之前也碰到过！DataTables自带的样式优先级挺高的，尤其是条纹行（odd/even类）的样式很容易覆盖自定义边框，给你几个实用的解决思路：

1. 提升CSS选择器的优先级（最直接的方法） #

DataTables默认的单元格样式用了类似table.dataTable tbody tr td或者table.dataTable tbody tr.odd td的选择器，你的.sorting类优先级不够，所以边框样式被覆盖了。你可以写更具体的选择器来“打败”默认样式：

/* 给所有排序列的单元格设置左右边框 */
table.dataTable tbody tr td.sorting {
  border-left: 2px solid #2c3e50; /* 换成你要的颜色 */
  border-right: 2px solid #2c3e50;
}

/* 首行排序单元格的上边框 */
table.dataTable tbody tr:first-child td.sorting {
  border-top: 2px solid #2c3e50;
}

/* 末行排序单元格的下边框 */
table.dataTable tbody tr:last-child td.sorting {
  border-bottom: 2px solid #2c3e50;
}

如果条纹行还是覆盖你的样式，就把选择器再细化，针对odd和even类：

table.dataTable tbody tr.odd td.sorting,
table.dataTable tbody tr.even td.sorting {
  border-left: 2px solid #2c3e50;
  border-right: 2px solid #2c3e50;
}

2. 检查表格的边框合并设置 #

如果你的表格用了border-collapse: collapse（DataTables默认可能开启这个），单元格的边框会合并在一起，这时候单独设置单元格边框可能看不到效果。你可以试试两种方案：

• 把表格的border-collapse改成separate，同时调整border-spacing：

table.dataTable {
  border-collapse: separate;
  border-spacing: 0;
}

• 或者用outline属性代替border，outline不会和其他边框合并：

table.dataTable tbody tr td.sorting {
  outline: 2px solid #2c3e50;
  outline-offset: -1px; /* 调整位置，避免和相邻边框重叠 */
}

3. 用自定义类替代默认的.sorting类 #

有时候默认的.sorting类和DataTables的内部样式耦合太紧密，不如自己在排序时给列添加自定义类，这样样式优先级更高。

先写JS逻辑，在表格初始化和排序时更新自定义类：

$('#your-table-id').DataTable({
  initComplete: function() {
    // 获取初始化时的排序列
    var sortedColIndex = this.api().order()[0][0];
    // 给该列所有单元格加自定义类
    this.api().columns(sortedColIndex).nodes().to$().addClass('custom-sorted-column');
  },
  // 监听排序事件，更新自定义类
  order: function() {
    var api = this.api();
    // 先移除所有列的自定义类
    api.columns().nodes().to$().removeClass('custom-sorted-column');
    // 给当前排序列加类
    var currentSortedCol = api.order()[0][0];
    api.columns(currentSortedCol).nodes().to$().addClass('custom-sorted-column');
  }
});

然后用这个自定义类写样式：

table.dataTable tbody tr td.custom-sorted-column {
  border-left: 2px solid #2c3e50;
  border-right: 2px solid #2c3e50;
}
table.dataTable tbody tr:first-child td.custom-sorted-column {
  border-top: 2px solid #2c3e50;
}
table.dataTable tbody tr:last-child td.custom-sorted-column {
  border-bottom: 2px solid #2c3e50;
}

4. 用浏览器开发者工具排查冲突 #

按F12打开开发者工具，选中排序列的单元格，看Styles面板里的边框样式是不是被划掉了（说明被其他样式覆盖）。找到覆盖它的默认样式，然后写比它更具体的选择器就行。比如如果默认样式是table.dataTable tbody tr.odd td { border-color: #ddd; }，那你的选择器就要包含tr.odd来覆盖它。

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