HTML5 Table can't get rid of thin border between th cells

I have a pretty design heavy table which uses two rotated th tags with divs inside of them side by side to look like one cell. I am having an issue with a thin line appearing in firefox and safari (not chrome) when I view the background colors.

What I've tried.

collapsed table.
cellspacing="0" and cellpadding="0"
added safari and mozilla prefixes for transforms
...a bunch of other still (help please).

link to jsfiddle with the table https://jsfiddle.net/LTFoReal/tb51dc8x/2/

<!-- Area where code is having trouble in jfiddle -->

<th class="pole name color-Reflection" rowspan="4">
          <div class="rotate" style="margin-left:-16px;">Reflection</div>
        </th>
        <th class="pole modifier color-Reflection" rowspan="4">
          <div class="rotate" style="margin-left:-64px">Benefits</div>
        </th>

This is what it currently looks like in safari/firefox/pdf preview (seems SO super sizes the images to fit, ugghh sorry).

Solution

I don't feel that this is an answer because I couldn't make the two th cells work side by side. I was however able to fix this by converting them to a single cell with a rowspan + colspan of 4 then dropping a div inside with 2 p tags and using flex box to make them do things.

table {
  margin-top: 40px;
}
  .pole {
    border: 1px solid var(--border-color);
    font-size: var(--font-s-normal);
  }

  .pole.name {
    width: 70px;
  }

  .pole-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: lightblue;
  }

  .pole.name .pole-container p {
     font-size: var(--font-s-normal);
    font-weight: var(--font-w-mid);
    padding: 0;
    margin: 0;
  }
  
  .rotate {
  transform: rotate(-90deg);
  }

<table>
  <tbody>
    <th class="pole name" rowspan="4" colspan="4">
        <div class="pole-container rotate">
           <p>Reflection</p>
           <p>Benefits</p>
        </div>
    </th>
   </tbody>
 </table>