Edge some of thead th when giving scroll (scroll page)

Question

Currently I have a table fixing the thead th at the top of div, but when scrolling (scrolling the page) add the edges of the th. I need that when giving scroll continue with the edges.

$("#tabela").on("scroll",function(){
  var tabela_divtop = $("table").closest($(this)).offset().top;
  var tabela_top = $("table").offset().top;
  var div_top = $(this).scrollTop();
  var dist = tabela_top-tabela_divtop-div_top;

  $("table thead th").css({
    'top': dist <= 0 ? -dist-div_top+'px' : '0',
    'z-index':'9',
    'cursor':'pointer',
    'border':'1px solid'
  });		
});

table{
  font-size:12px!important;
  border-width: 1px; 
  border-color: #A4A4A4;
  border-collapse: collapse;  
  white-space: nowrap!important;
  width: 100%;
  padding: 0px!important;
  text-align: center!important;
}
th{
  white-space: nowrap!important;
  font-size:12px!important;
  background-color:#FFFFFF;
  border-width: 1px;
  padding: 1px!important;
  border-style: solid;
  border-color: #A4A4A4; 
  text-align:center!important;
}
tr{
  background-color:#ffffff; 
  padding: 1px!important;
  text-align: center!important;
}
td{
  width:50px; 
  border-style: solid!important;
  border-color: #A4A4A4!important;
  font-size:12px!important;
  border-width: 1px;
  padding: 1px!important;
  text-align: center!important;
}
*{
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="large-12 medium-12 small-12 columns" id="tabela" style="overflow-y:  scroll; height: 10%; border: 0px solid;">
  <table>
    <thead>
      <tr>
        <th>Titulo 1</th>
        <th>Titulo 2</th>
        <th>Titulo 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>teste 1</td>
        <td>teste 2</td>
        <td>teste 3</td>
      </tr>
      <tr>
        <td>teste 1</td>
        <td>teste 2</td>
        <td>teste 3</td>
      </tr>
      <tr>
        <td>teste 1</td>
        <td>teste 2</td>
        <td>teste 3</td>
      </tr>
      <tr>
        <td>teste 1</td>
        <td>teste 2</td>
        <td>teste 3</td>
      </tr>
      <tr>
        <td>teste 1</td>
        <td>teste 2</td>
        <td>teste 3</td>
      </tr>
      <tr>
        <td>teste 1</td>
        <td>teste 2</td>
        <td>teste 3</td>
      </tr>
      <tr>
        <td>teste 1</td>
        <td>teste 2</td>
        <td>teste 3</td>
      </tr>
      <tr>
        <td>teste 1</td>
        <td>teste 2</td>
        <td>teste 3</td>
      </tr>
      <tr>
        <td>teste 1</td>
        <td>teste 2</td>
        <td>teste 3</td>
      </tr>
      <tr>
        <td>teste 1</td>
        <td>teste 2</td>
        <td>teste 3</td>
      </tr>
    </tbody>
  </table>
</div>

Without giving the scroll:

With scroll on page:

Answer 1

What causes this is border-collapse: collapse;, solved using the border-collapse: separate; and used the position: sticky and top: 0 to fix the thead when using Jquery.

* {
  padding: 0;
  margin: 0;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-right: 2px;

}

thead th {
    position: sticky;
    top: 0;
    background-color: #c3ac6c;
}

th {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-right: 1px solid;
    text-align: center;
    padding: 2px;
}


tbody tr:nth-child(even) {
    background: #efefef;
    overflow: hidden;
}

td {
    border-bottom: 1px solid;
    border-right: 1px solid;
    padding: 2px;
    text-align: center;
}

th:first-child,
td:first-child {
    border-left: 1px solid;
}

tfoot td{
  background: blue;  
  position: sticky;
  bottom: 0;
}

<table>
  <thead>
    <tr>
      <th>teste 1</th>
      <th>teste 2</th>
      <th>teste 3</th>  
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
     <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
  </tbody>
 <tfoot>
    <tr>
      <td> teste 1</td>
      <td> teste 2</td>
      <td> teste 3</td>
    </tr>
  </tfoot>
</table>