为什么我的头在流血？答案

【问题标题】：Why are my headers bleeding?为什么我的头在流血？
【发布时间】：2015-03-24 00:32:14
【问题描述】：

我正在尝试实现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
    } );
} );

【问题讨论】：

标签： jquery datatables jquery-datatables datatables-1.10

【解决方案1】：

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

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

见dataTables.fixedColumns.css和jquery.dataTables.css

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

【讨论】：

当我将“div.dataTables_wrapper”的宽度设置为 100% 时，固定列失去了底部边框。我该如何纠正？jsfiddle.net/yt4xmyh2/3
到底是哪个底边？我不认为我在这里看到任何不同。
这就是我所看到的（每个固定列上表格的底部边框缺失）：imgur.com/eW9NdhM
啊，好的，我现在明白了。我不认为有一个简单的解决方法......最好从.dataTables_wrapper.no-footer .dataTables_scrollBody 中删除现有边框并将其添加回父包装器元素。在这里底部一直看到我的两个额外的样式声明：jsfiddle.net/yt4xmyh2/4
css 每次都会踢我的**。感谢您的超越。

【解决方案2】：

您可以将background-color 添加到所需的元素（通常是 td 和 th）。这是一个更新的小提琴（基于您提供的）：http://jsfiddle.net/cjqgmzb9/

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

【讨论】：

没有看到额外的 css 文件。那是我缺少的部分。谢谢！