为什么我的头部出血?

时间:2015-03-24 00:32:15

标签: jquery datatables jquery-datatables datatables-1.10

我正在尝试实施fixed column using datatables。他们给出的例子似乎很好看。我implemented the same code in jsfiddle但当我向右滚动时,我的标题会互相流淌剩下。我该如何解决?

$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false
    } );

    new $.fn.dataTable.FixedColumns( table, {
        leftColumns: 1,
        rightColumns: 1
    } );
} );

2 个答案:

答案 0 :(得分:1)

您可以向所需元素添加background-color(通常为td& th)。这是一个更新的小提琴(基于您提供的小提琴):http://jsfiddle.net/cjqgmzb9/

顺便说一句,如果您使用插件提供的CSS文件(请参阅您提供的示例中的CSS选项卡),该表应该看起来与演示完全相同。

答案 1 :(得分:1)

您提供的示例使用样式隐藏jsfiddle中不存在的重叠内容。具体来说,他们将背景颜色添加到固定的列中,例如:

column.stripe tbody tr.odd > .sorting_1 {
  background-color: #f1f1f1;
}

请参阅dataTables.fixedColumns.cssjquery.dataTables.css

如果您将这些样式应用于您的小提琴,一切看起来都不错:your fiddle