jQuery table column headings misaligned with body

Question

Yes, once again its a problem of column headings not lining up with the data table. I've read the many posts on this, but suspect the cause of my problem may be a little different. My problem is I've lost the left border when hovering the column titles. Also the bottom border, when hovered, doesn't align with the vertical grey lines, particularly in the second column. Nothing I've tried seems to help. Any ideas very much appreciated. Fiddle: https://jsfiddle.net/c5esLafy/

https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js


<div id="TradeCodesPopupProductsCodesStore_tr">

  <form id="frm-example" action="/nosuchpage" method="POST">

    <table id="example" class="display select" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th></th>
          <th>Trade Code</th>
          <th>Product Group</th>
          <th>Product description</th>
          <th>Steel Type</th>
          <th>Full product HS code definition</th>
          <th>Start Year</th>
          <th>End Year</th>
        </tr>
      </thead>
      <!-- <tfoot>
     </tfoot>  -->
      <tbody>
        <tr id="row250200">
          <td>
            <input id="HS250200" type="checkbox" value="HS 250200" />
          </td>
          <td> 250200 </td>
          <td> Raw Materials </td>
          <td> Iron Ore - unroasted </td>
          <td> - </td>
          <td> Unroasted iron pyrites </td>
          <td> Jan.1992 </td>
          <td> - </td>
        </tr>
        <tr id="row260111">
          <td>
            <input id="HS260111" type="checkbox" value="HS 260111" />
          </td>
          <td> 260111 </td>
          <td> Raw Materials - Iron ore </td>
          <td> Iron Ore - fines, concentrate, lump </td>
          <td> - </td>
          <td> Non-agglomerated iron ores &amp; concentrates,other than roasted iron pyrites </td>
          <td> Jan.1992 </td>
          <td> - </td>
        </tr>
        <tr id="row260112">
          <td>
            <input id="HS260112" type="checkbox" value="HS 260112" />
          </td>
          <td> 260112 </td>
          <td> Raw Materials - Iron ore </td>
          <td> Iron Ore - pellets, briquettes </td>
          <td> - </td>
          <td> Agglomerated iron ores &amp; concentrates,other than roasted iron pyrites </td>
          <td> Jan.1992 </td>
          <td> - </td>
        </tr>

      </tbody>
    </table>

    <pre id="example-console">
</pre>
  </form>

</div>

.

$(function() {

  $('#example').DataTable({
    scrollY: '50vh',
    scrollX: '100%',
    scrollCollapse: true,
    paging: false,

    'columnDefs': [{
      'targets': 0,
      'width': '4%',
      'searchable': false,
      'orderable': false,
      'className': 'dt-body-center'
    }, {
      "width": "8%",
      "targets": 1
    }, {
      "width": "19%",
      "targets": 2
    }, {
      "width": "18%",
      "targets": 3
    }, {
      "width": "9%",
      "targets": 4
    }, {
      "width": "30%",
      "targets": 5
    }, {
      "width": "6%",
      "targets": 6
    }, {
      "width": "6%",
      "targets": 7
    }, ],

    "order": [
      [1, "asc"]
    ],
    responsive: true
  });

  $('table.dataTable thead th:nth-last child(7)').addClass('COLSelectionHighlight');

});

.

#TradeProdsPOPUP_ContainerID {
  /* Outside container */
  position: absolute;
  display: none;
  border: 1px solid grey;
}

.COLSelectionHighlight {
  color: red !important;
}

#frm-example table {
  width: 100%;
  margin: 0 auto;
  clear: both;
  border-collapse: separate;
  border-spacing: 1px;
  padding: 8px 10px 3px 0px;
}

#frm-example table thead th {
  border: 1px solid transparent;
}

#frm-example table thead th:hover {
  border: 1px solid red;
}

.dataTables_filter {
  position: relative;
  margin: 6px 0px 10px 24px;
}

#frm-example table {
  border-collapse: collapse;
}

#frm-example table tr:last-child td {
  border-bottom: 1px solid black;
}

#frm-example table tr:hover td:first-child {
  border-left-color: #5a8dff;
}

#frm-example table tr:hover td:last-child {
  border-right-color: #5a8dff;
}

#frm-example table tr:hover td {
  border-top-color: #5a8dff;
  border-bottom: 2px solid #5a8dff;
  background: #f1f1f1;
}

#frm-example table td {
  width: 50px;
  padding: 5px;
  border-left: 1px solid #c5c3c3;
  border-right: 1px solid #e8e8e8;
  border-top: 2px solid #e2e2e2;
  border-bottom: 1px solid #e2e2e2;
  transition: border-color 0.3s linear;
  -webkit-transition: border-color 0.3s linear;
}

Answer 1

Can you check this fiddle.

Your problems seems to be over here,

#frm-example table {
  /* border-collapse: collapse; */
}