使用 sScrollX / sScrollY 未对齐的列标题答案

【问题标题】：Misaligned column headings using sScrollX / sScrollY使用 sScrollX / sScrollY 未对齐的列标题
【发布时间】：2016-09-26 07:32:36
【问题描述】：

我正在尝试将2px solid #fff 边框放在我桌子上的所有 td 和 th 上。我遇到的问题是，一旦表格转换为 jquery 数据表，标题单元格边框与正文单元格边框不对齐。

我已经尝试在 css 中放置

table td, table th {
    border: 2px solid #fff;
}

也试过table-border类和cell-border类

我尝试将类名放在所有标题上，然后为不对齐的标题调整宽度，问题是，一旦我到达第 15 列对齐它就不会

我将以下代码放入initComplete

$(".header_SITE, .header_JVCO_ID").css("padding-right","32px"); // 1st 2 columns
            $(".header_INCIDENT_NUMBER, .header_CRQ ").css("padding-right","31px"); //15 and 16th column

当我在数据表中添加以下选项时，似乎会出现此问题

'sScrollX': '100%',
        'scrollX': true,
        'sScrollY': ($(window).height()-520),
        scrollCollapse: true,
'bScrollCollapse': true,

我现在也尝试了oTable.columns.adjust().draw();，但没有效果

【问题讨论】：

标签： css twitter-bootstrap-3 datatables

【解决方案1】：

通过更新和使用jsfiddle指定的所有源文件来纠正问题

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

<!--bootstrap-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!--datatabler-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>

<!--buttons-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>


<!--FixedColumns-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>

<!--FixedHeader-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>

<!--FixedHeader-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/1.4.2/css/scroller.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/scroller/1.4.2/js/dataTables.scroller.min.js"></script>


<!--FixedHeader-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css">
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script>

【讨论】：