jQuery 表格列标题与正文不对齐

Question

是的，这又是一个列标题与数据表不对齐的问题。我已经阅读了很多关于此的帖子，但怀疑我的问题的原因可能有点不同。我的问题是当我悬停列标题时失去了左边框。此外，当悬停时，底部边框不与垂直灰线对齐，特别是在第二列中。我尝试过的一切似乎都没有帮助。非常感谢任何想法。 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

你能检查一下这个fiddle .

你的问题似乎已经结束了，

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