title: Bootstrap 4: Is there a fix/workaround for false anti-aliasing in MS Edge for the border of sticky th
body: <p>I will be referencing <a href="https://codepen.io/balajidesigner/pen/YBKQBK?editors=1100" rel="nofollow noreferrer">this Pen</a> from Balaji731's answer in <a href="https://stackoverflow.com/questions/54286705/bootstrap-4-table-with-the-scrollable-body-and-header-fixed">Bootstrap 4 table with the scrollable body and header fixed</a>.</p>
  
  <p>So, if you open the Pen in Microsoft Edge, and you have <code>&lt;th&gt;</code> borders turned on, they will just scroll away, leave a gap and fail to render the thead contents correctly.</p>
  
  <p>As my personal workaround I have set <code>border: 0;</code> on the <code>&lt;th&gt;</code>'s , which I actually don't want to. Does anyone have a solution for that?</p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
  &lt;table class="table table-hover" id="job-table"&gt;
   &lt;thead&gt;
    &lt;tr class="text-center"&gt;
     &lt;th scope="col"&gt;Sr.No.&lt;/th&gt;
     &lt;th scope="col"&gt;Company Name&lt;/th&gt;
     &lt;th scope="col"&gt;Technology&lt;/th&gt;
     &lt;th scope="col"&gt;Total Resumes&lt;/th&gt;
     &lt;th scope="col"&gt;Job Title&lt;/th&gt;
     &lt;th scope="col"&gt;Total Score&lt;/th&gt;
     &lt;th scope="col"&gt;Average Score&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
    &lt;tr key={key}&gt;
     &lt;td class="font-weight-bold"&gt;1&lt;/td&gt;
     &lt;td class="font-weight-bold"&gt;ABCDED&lt;/td&gt;
     &lt;td&gt;Software Developer&lt;/td&gt;
     &lt;td class="font-weight-bold"&gt;17&lt;/td&gt;
     &lt;td&gt;5 years experience&lt;/td&gt;
     &lt;td class="font-weight-bold"&gt;30&lt;/td&gt;
     &lt;td class="font-weight-bold"&gt;30&lt;/td&gt;
    &lt;/tr&gt;
     &lt;tr key={key}&gt;
      &lt;td class="font-weight-bold"&gt;1&lt;/td&gt;
      &lt;td class="font-weight-bold"&gt;ABCDED&lt;/td&gt;
      &lt;td&gt;Software Developer&lt;/td&gt;
      &lt;td class="font-weight-bold"&gt;17&lt;/td&gt;
      &lt;td&gt;5 years experience&lt;/td&gt;
      &lt;td class="font-weight-bold"&gt;30&lt;/td&gt;
      &lt;td class="font-weight-bold"&gt;30&lt;/td&gt;
     &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>And the CSS:</p>
  
  <pre><code>.table-responsive{
    height:400px;  
    overflow:scroll;
  }
  thead tr:nth-child(1) th{
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/rhsD3.png" rel="nofollow noreferrer">MS Edge Screenshot</a></p>