不需要的 CSS 边框样式（DataTables 标题）答案

【问题标题】：Unwanted CSS Border Style (DataTables header)不需要的 CSS 边框样式（DataTables 标题）
【发布时间】：2019-02-09 02:29:11
【问题描述】：

我的 CSS 技能还不够，所以提前道歉。我正在使用 DataTables jQuery 插件处理页面。在我的表格的标题上，我有一个要删除的边框样式。

我夸大了效果，以使我在说什么……

这是它现在的样子...

这就是我想要的样子...

这是有问题的页面...

https://darkjedi.org/club/FOX/members/mwo_stats.php

我希望它只是一条平坦的黑色垂直线。

编辑：最初我误认为这是一个阴影问题，后来我意识到这是一个边框样式问题。

【问题讨论】：

所以您要删除金色下划线？这是一个边界，而不是一个阴影。
我不确定你所说的“影子”是什么意思。似乎没有任何阴影效果，th 上只有黑色的左/右边框和金色的底边框。请您澄清一下您要删除的内容吗？也许使用照片编辑器来展示预期的结果
你在 CSS 类上试过border: solid; border-color: #000000; 吗？
我更新了问题以显示我希望它看起来像的照片。
PHP 代码无关紧要，因为它不会为此操作 CSS。我没有发布 CSS，因为它将近 400 行（由 datatables.net/manual/styling/theme-creator 的 DataTables 主题创建者生成）。

标签： css datatables

【解决方案1】：

我解决了这个问题：

移除右边框
使th 相对定位
添加一个绝对定位的黑条，并使其与已移除边框的宽度相同（通过::after）
将绝对定位的黑条固定在单元格的右侧，使其充当边框
调整排序箭头的background-position，使其与右侧单元格壁正确偏移

table.dataTable.compact thead th {
  padding-right: 25px;
  border-right: none;
  position: relative;
}

table.dataTable.compact thead th::after {
  content: '';
  width: 5px;
  height: 100%;
  background: black;
  position: absolute;
  right: 0;
  top:0;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc {
  background-position: calc(100% - 5px) 50% !important;
}

【讨论】：