不需要的CSS边框样式（DataTables表头）

Question

很抱歉，我的CSS技能还不够好。我正在使用DataTables jQuery插件制作一个页面。在表头上，我有一个边框样式，我想要去掉它。

为了让大家更容易理解，我夸大了效果...

这是现在的样子...

这是我想要的样子...

这是相关页面的链接...

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

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

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

- ThunderMax

---

所以你想要移除那个金色的下划线？那是一个边框，不是阴影。 - chazsolo

我不确定您在这里所指的“阴影”是什么意思。似乎没有任何阴影效果，只有th左/右侧的黑色边框和底部的金色边框。请问您能否澄清您要删除的内容？也许可以使用照片编辑器演示预期的结果。 - DACrosby

你尝试过在CSS类中使用border: solid; border-color: #000000;吗？ - hewiefreeman

我更新了问题，展示了一个Photoshop处理过的图片，展示了我想要它看起来的样子。 - ThunderMax

这个问题很容易解决。请编辑您的问题并包含相关的PHP、CSS和HTML代码，以便我们可以确定您的错误在哪里。链接到您的页面并不能为我们提供帮助所需的信息。 - elbrant

PHP代码与此无关，因为它不会操作CSS。我没有发布CSS，因为它将近有400行（由DataTables主题创建器在https://datatables.net/manual/styling/theme-creator生成）。 - ThunderMax

Answer 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;
}

- Andy Hoffman