title: Add space between two columns in datatables
body: <p>My goal is to rewrite some of our old html tables using DataTable so that we can use their abilities (filtering, etc...)</p>
  
  <p>I would like to have a unique table shown like two separate tables, juste like in example below :</p>
  
  <p><a href="https://i.stack.imgur.com/SfaHZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SfaHZ.png" alt="enter image description here"></a></p>
  
  <p>I need it to be one unique table so that scrolling works on the two parts.</p>
  
  <p>What was made before was adding an empty column and style it so that it looks like spacing, but I don't know what style I could use to have borders on header and at the bottom of my table, so that it's not showing on the empty column.</p>
  
  <p><a href="https://i.stack.imgur.com/yTKoz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yTKoz.png" alt="enter image description here"></a></p>
  
  <p>Can someone help me please ?
  Thanks</p>
  
  <hr>
  
  <p>UPDATE : my table is simply html based.</p>
  
  <p>Here is my datatable instanciation :</p>
  
  <pre><code>$(document).ready(function(){
      var table = $('#example').DataTable({
          dom: '&lt;t&gt;',
          paging: false,
        scrollY: '200px',
        ordering: false,
        columns: [
          null, null, null, null, {className: "emptySpace"}, null, null
        ]
      });
  });
  </code></pre>
  
  <p>Here is my css stylesheet :</p>
  
  <pre><code>.dataTables_scroll {
      clear: both;
      border-right: 1px solid;
      border-bottom: 1px solid black;
  }
  
  .dataTables_scrollHeadInner {
      background-color: #afc99a;
      background-clip: padding-box;
      border-top: 1px solid !important;
      border-bottom: 1px solid !important;
  }
  
  th.emptySpace, td.emptySpace {
      background-color: white !important;
      border-bottom:none !important;
      border-top: none !important;
  }
  
  .table th, .table td  {
      border-left: 1px solid;
      border-top: none;
  }
  
  tr.even td {
    background: #ecece9 none repeat scroll 0 0;
  }
  </code></pre>
  
  <p>And a JSFiddle example with an example code but my real css stylesheet :</p>
  
  <p><a href="https://jsfiddle.net/44p919fj/18/" rel="nofollow noreferrer">https://jsfiddle.net/44p919fj/18/</a></p>
  
  <p>I can't remove some borders...</p>