Jquery 固定列标题宽度与正文列宽度不匹配

标题与列宽不一致

我正在使用：

• ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css
• ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables\u themeroller.css
• datatables.net/release-datatables/media/js/jquery.js
• datatables.net/release-datatables/media/js/jquery.datatables.js
• datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js

以下是我正在使用的代码：

JS:

HTML:

分支机构
对象
地址
计数
可利用性
15
16
17
18
19
20
21
美利坚合众国，华盛顿
ABC-123
美国华盛顿州诺海德河底琥珀塘公路1514号，邮编：99205-8224，（425）023-9448
---
----
美利坚合众国，南达科他州
DEF-456
7827美国南达科他州桑斯威特市石岬镇，57006-2156，（605）621-7800
---
----
美利坚合众国，纽芬兰
XYZ-549
2379露水先锋高地，亨堡，纽芬兰，加利福尼亚州A7O-6P5，（709）217-5115
---
----
美利坚合众国，华盛顿
GHI-789
5842美国华盛顿州克拉瓦克萨拉克轻松湾，98428-9376，（425）998-1922
---
----

我可以通过将

th

的边距和填充重置为零来解决这个问题：

th {
  padding: 0 !important;
  margin: 0 !important;
}

---

这个问题是由sScrollX滚动条引起的，它向右侧的列添加了额外的水平空间，这就是为什么其他列（没有滚动条）在标题上变短的原因

如果注释sScrollX行，则列将正确对齐

---更新---

要使用js固定宽度，这将起作用：

// *** FIX WIDTHS ON LEFT SIDE ***
var widths = [];

// first fix widths on tbody ...
$('.DTFC_LeftBodyWrapper thead th').each(
    function(){
        $(this).css('width', $(this).width());
    });

// ... now save the actual widths on array
$('.DTFC_LeftBodyWrapper thead th').each(
    function(){ 
        widths.push($(this).width());
    });

// ... and now update widths on thead
$('.DTFC_LeftHeadWrapper thead th').each(
    function(i, val){
        console.log('i:', i, ', width:',  widths[i]);
        $(this).css('width', widths[i]);
    });

我更新了一个

---

注意：我还将

Count

更改为

Cnt

，因为jsfiddle窗口太长，导致了额外的宽度问题。

数据表在包含水平填充时错误计算了th宽度

我将填充物从th中移除，在其内部添加一个跨距，然后将填充物添加到跨距

即

th{填充：0}
th>span{padding:010px}

更改标记如下：

<tr>
 <th rowspan="2"><span>Branch</span></th>
 <th rowspan="2"><span>Object</span></th>
</tr>

分支机构
对象

更好，但不太好。演示：屏幕截图：不知道sScrollX的真正功能是什么，但将其设置为更高的值并使用我之前的答案似乎可以解决它。要高多少？我尝试了100%->190%，但对我来说并没有什么区别：/I我需要确保前4列是固定的，“可用性”列是可滚动的。如果我对sScrollX行进行注释，表将不可滚动。是的，我知道。问题是，FixedColumns脚本计算单元格宽度的方式。有了这个额外的水平空间，它就“计算错误”了左侧单元格的宽度。可能是个虫子。但我想不出任何方法可以通过纯css干净地解决这个问题。也许你也可以在左边添加一个滚动条，但不知怎么修复它？或者“只是”修改js-script。如果您还没有解决这个问题，我认为最简单的方法是将WISS从表的第一行（标题下）重新分配到标题单元格。所以你们又有了标题和正文单元格之间的匹配宽度。检查答案是否适用于你们。

// *** FIX WIDTHS ON LEFT SIDE ***
var widths = [];

// first fix widths on tbody ...
$('.DTFC_LeftBodyWrapper thead th').each(
    function(){
        $(this).css('width', $(this).width());
    });

// ... now save the actual widths on array
$('.DTFC_LeftBodyWrapper thead th').each(
    function(){ 
        widths.push($(this).width());
    });

// ... and now update widths on thead
$('.DTFC_LeftHeadWrapper thead th').each(
    function(i, val){
        console.log('i:', i, ', width:',  widths[i]);
        $(this).css('width', widths[i]);
    });

<style>
th {padding: 0}
th > span {padding: 0 10px}
<style>

<tr>
 <th rowspan="2"><span>Branch</span></th>
 <th rowspan="2"><span>Object</span></th>
</tr>