Добавить пространство между двумя колоннами в DataTables

Question

Моя цель состоит в том, чтобы переписать некоторые из наших старых HTML таблиц с помощью DataTable, так что мы можем использовать свои способности (фильтрация, и т.д. ...)

Я хотел бы иметь уникальную таблицу показано, как две отдельные таблицы, Жюст, как в примере ниже:

мне это нужно, чтобы быть один уникальный стол, так что прокрутка работ на две части.

Что было сделано раньше, было добавление пустого столбца и его стиль, чтобы он выглядел как промежуток, но я не знаю, какой стиль я мог бы использовать, чтобы иметь границы с заголовком и внизу моей таблицы, так что это не отображается в пустой колонке.

Может кто-нибудь помочь мне, пожалуйста? Благодаря

---

UPDATE: моя таблица просто HTML основе.

Вот моя DataTable при создании экземпляра:

$(document).ready(function(){ 
    var table = $('#example').DataTable({ 
     dom: '<t>', 
     paging: false, 
     scrollY: '200px', 
     ordering: false, 
     columns: [ 
     null, null, null, null, {className: "emptySpace"}, null, null 
     ] 
    }); 
}); 

Вот мой таблицы стилей CSS:

.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; 
} 

И JSFiddle пример с примером кода, но мой реальный CSS стилей:

https://jsfiddle.net/44p919fj/18/

Я не могу удалить границы ...

Answer 1

Что-то вроде этого следует сделать трюк:

var table = $('#example').DataTable({ 
     "columnDefs":[ 
      {"sortable":false, "class":"spacer", "targets": 4} 
    ] 
}); 

С помощью этого CSS:

.spacer{ 
    background-color:white; 
    border-top:none !important; 
    border-bottom:none !important; 
} 

Хотя границы для левой и правой будет до вас, чтобы разобраться. В основном, что вы предложили, но «спрятали» тот факт, что у вас пустая строка. Пример here.

Вы могли бы даже дать ряд перед толстым белым border ...?