在数据表

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

一个带有示例代码的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之前给出行......？