Answers

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 24 Answer ✓

  A border box was shown when mouse cursor was over a column header.

  This is intentional to show the mouse position and make it easier for the user to identify that something would happen on click. If you don't want that, add the following CSS to your page:

  table.dataTable thead > tr > th:hover {
    outline: none !important;
  }
  

  Extra top and bottom border lines were shown

  Can you link to a test case showing the issue please? I'm not seeing that here.

  Allan
• ryanong Posts: 4Questions: 2Answers: 0

  April 24 edited April 24

  Hi Allan, thanks for your fast response. The mouse-over issue is now fixed as per your reply.

  As for the extra border lines issue, please refer to the image prior to the update:

  

  Extra black border lines were shown in top and bottom of tbody.

  

  • I am sorry as I am not able to create a test case to illustrate the issue.
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 24

  I'm afraid I can't debug CSS in an image and the example I provided doesn't appear to show the issue you are seeing. I'm afraid I don't know what is causing that and can't help without a test case.

  Allan
• ryanong Posts: 4Questions: 2Answers: 0

  April 24

  Hi Allan, somehow I managed to add the following to CSS and the issues are fixed:

  table.dataTable thead > tr > th:hover {
      outline: none !important;
  }
  
  table.dataTable thead th {
      border-bottom: 0 !important;
  }
  
  table.dataTable tbody {
      border-top: 0 !important;
  }
  
  div.dt-scroll-body {
      border-bottom: 1px solid var(--vz-border-color) !important;
  }
  
  div.dt-scroll-foot {
      margin-top: 6px !important;
  }
  

  Thanks for your help.