Нежелательный стиль рамки CSS (заголовок DataTables)

Question

Мои навыки CSS все еще отсутствуют, поэтому извиняюсь заранее.Я работаю над страницей, используя плагин DataTables jQuery.В заголовках таблицы у меня есть стиль рамки, который я пытаюсь удалить.

Я слишком преувеличил эффект, чтобы было понятно, о чем я говорю ...

Вот картинка того, как это выглядит сейчас ...

Вот как я хочу, чтобы это выглядело ...

Вот эта страница, о которой идет речь ...

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

Мне бы хотелось, чтобы это была плоская чёрная линия вертикали.

EDIT : Первоначально я принял это за проблему с тенью, с тех пор я понял, что это проблема в стиле границы.

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