在数据表的两列之间添加空格

Question

我的目标是使用 DataTable 重写我们的一些旧 html 表，以便我们可以使用它们的能力（过滤等......）

我希望有一个像两个单独的表格一样显示的独特表格，就像下面的示例一样：

我需要它是一个独特的表格，以便滚动在两个部分上工作。

之前所做的是添加一个空列并对其进行样式设置，使其看起来像间距，但我不知道我可以使用什么样式在标题和表格底部设置边框，所以它不是显示在空列上。

有人可以帮帮我吗？ 谢谢

---

更新：我的表格只是基于 html 的。

这是我的数据表实例化：

$(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;
}

还有一个带有示例代码但我真正的 css 样式表的 JSFiddle 示例：

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...之前给一行？