Unwanted CSS Border Style (DataTables header)

Question

My CSS skills are still lacking, so apologies ahead of time. I am working on a page using the DataTables jQuery plug-in. On the headers of my table, I have a border style I'm trying to remove.

I've over exaggerated the effect to make it obvious what I'm talking about...

Here's a picture of what it looks like now...

Here's what I want it to look like...

Here's the page in question...

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

I'd like it to just be a flat, black, verticle line.

EDIT: Initially I mistook this for a shadow issue, I've since realized this is a border-style issue.

Answer 1

I solved this by:

• removing the right border
• making the th relatively positioned
• adding an absolutely positioned black bar and making it the width of the removed border (via ::after)
• pinning the absolutely positioned black bar to the right of the cell, so it acts as a border
• adjusting the background-position of the sorting arrows so they're offset properly from the right cell wall

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