为什么我的 headers 会流血？

Question

我正在尝试实现 fixed column using datatables. The example they give seems to look good. I've implemented the same code in jsfiddle，但是当我向右和向左滚动时，我的 headers 会互相溢出。我该如何解决？

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

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

Answer 1

您可以在所需元素（通常是 td & th）中添加一个 background-color。这是更新后的 fiddle（基于您提供的）：http://jsfiddle.net/cjqgmzb9/

顺便说一下，如果您使用插件提供的 CSS 文件（参见您提供的示例中的 CSS 选项卡），table 应该看起来完全一样作为演示。

Answer 2

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

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

见dataTables.fixedColumns.css and jquery.dataTables.css

如果您将这些样式应用于您的 fiddle 一切看起来都不错：your fiddle。

为什么我的 headers 会流血？

Why are my headers bleeding?

jquery

datatables

jquery-datatables

datatables-1.10