使用sScrollX / sScrollY未对齐列标题

Question

我试图将echo NoAccess|net use s: "\\domain.com\path\to\share" >nul 2>&1 边框放在我桌子上的所有td和th上。我遇到的问题是，一旦将表转换为jquery数据表，标题单元格边框就不会与正文单元格边框对齐。

我尝试过放入css

2px solid #fff

还尝试了table td, table th { border: 2px solid #fff; } 类和table-border类

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

我在cell-border

中添加了以下代码

initComplete

当我在datatables

中添加以下选项时，似乎会出现此问题

$(".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, 无效

Answer 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>