DataTables固定标题与宽表中的列不对齐

Question

DataTables固定标题与宽表中的列不对齐

bPr*_*tik 55 jquery datatables

问题

当使用sScrollX,sScrollXInner和/或sScrollY以实现在其内的内容的滚动固定报头表,表中的标题出去对准的与所述主体的在Chrome和IE的其余部分.另一方面,Firefox完美地显示它们.

使用版本1.9.4,据我所知,只有在存在大量宽度波动的数据时才会出现此问题,并且在与小列相同的列中使用非常长/不可包含的单词.此外,该表格需要相当广泛.

所有这些因素都在这个小提琴中得到证明:

产量

铬:

IE:

火狐

建议的解决方案

之前已经提出过这些解决方案,但对我的实施没有任何影响.由于其中一些建议,我设置了一个干净的普通香草演示,因为我想确保没有其他代码有助于这种效果.

关闭/删除我所有的CSS
setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 );
调用oTable.fnFilter( "x",0 )和oTable.fnFilter( "",0 )按顺序
"sScrollXInner": "100%"
摆脱所有宽度

我发现失准头,唯一溶液取出sScrollX和sScrollY,但你失去了固定的页眉/内部内容的滚动功能这不能算作一个解决方案.可悲的是,这是一个暂时的黑客,而不是一个修复!

注意

编辑/播放最新的小提琴.

我尝试了各种组合,可以通过使用链接http://jsfiddle.net/pratik136/etL73/#REV#在小提琴的修订历史中观察到1 <= #REV# <= 12

历史

StackO
这个问题以前有人问:jQuery的数据表头对准相垂直滚动
,但重要的区别是,这个问题的任择议定书提到,他们能够在所有CSS被删除,这是在我的情况不实,以解决这个问题,我尝试了一些排列,因此认为值得重新发布的问题.

外部
此问题也已在DataTables论坛上标记:

这个问题让我疯了!请提出你的想法!

Answer 1

Dra*_*kos 13

以下是一种实现固定标头表的方法,我不知道它是否足够用于您的目的.变化是:

使用"bScrollCollapse"而不是"sScrollXInner"
不要使用fieldset来包装表
添加"div.box"css类

它似乎完全在我的本地机器上运行,但它并没有完全使用Fiddle.似乎Fiddle添加了一个css文件(normalize.css),它以某种方式破坏了插件css(我确信我可以在Fiddle中完全正常工作,添加一些css明确规则,但现在没有时间进一步调查)

我的工作代码段如下.希望这可以提供帮助.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
  <script type='text/javascript' src="http://datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script>

 <style type='text/css'>
       div.box {
       height: 100px;
       padding: 10px;
       overflow: auto;
       border: 1px solid #8080FF;
       background-color: #E5E5FF;
   }

  .standard-grid1, .standard-grid1 td, .standard-grid1 th {
    border: solid black thin;
   }
</style>

<script type='text/javascript'> 
$(window).load(function(){
$(document).ready(function() {
    var stdTable1 = $(".standard-grid1").dataTable({
        "iDisplayLength": -1,
        "bPaginate": true,
        "iCookieDuration": 60,
        "bStateSave": false,
        "bAutoWidth": false,
        //true
        "bScrollAutoCss": true,
        "bProcessing": true,
        "bRetrieve": true,
        "bJQueryUI": true,
        "sDom": '<"H"CTrf>t<"F"lip>',
        "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
        "sScrollX": "100%",
        //"sScrollXInner": "110%",
        "bScrollCollapse": true,
        "fnInitComplete": function() {
            this.css("visibility", "visible");
        }
    });
});
});

</script>


</head>
<body>
<div>
    <table class="standard-grid1 full-width content-scrollable" id="PeopleIndexTable">
        <thead>
          <!-- put your table header HTML here -->
       </thead>
       <tbody>
          <!-- put your table body HTML here -->
        </tbody>
    </table>
</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Rus*_*ovs 12

编辑:使用"固定标题" 查看最新的小提琴:

的小提琴.

其中一个解决方案是自己实现滚动,而不是让DataTables插件为您完成.

我已经举了你的例子并注释掉了sScrollX选项.当此选项不存在时,DataTables插件将简单地将您的表放入容器div中.因此,这个表将延伸出屏幕,以便修复我们可以将它放入具有所需宽度和溢出属性集的div中 - 这正是最后一个jQuery语句所做的 - 它将现有表包装成300px宽的div.您可能根本不需要在包装div上设置宽度(在此示例中为300px),我在此处使用它以便可以轻松看到剪切效果.并且要好,不要忘记用类替换内联样式.

$(document).ready(function() {
var stdTable1 = $(".standard-grid1").dataTable({
    "iDisplayLength": -1,
    "bPaginate": true,
    "iCookieDuration": 60,
    "bStateSave": false,
    "bAutoWidth": false,
    //true
    "bScrollAutoCss": true,
    "bProcessing": true,
    "bRetrieve": true,
    "bJQueryUI": true,
    //"sDom": 't',
    "sDom": '<"H"CTrf>t<"F"lip>',
    "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
    //"sScrollY": "500px",
    //"sScrollX": "100%",
    "sScrollXInner": "110%",
    "fnInitComplete": function() {
        this.css("visibility", "visible");
    }
});

var tableId = 'PeopleIndexTable';
$('<div style="width: 300px; overflow: auto"></div>').append($('#' + tableId)).insertAfter($('#' + tableId + '_wrapper div').first())});

Run Code Online (Sandbox Code Playgroud)

在这种情况下,你可以这样做:http://jsfiddle.net/ruslans_uralovs/zDaGk/ (2认同)

归档时间：	13 年，1 月前
查看次数：	98457 次
最近记录：	6 年，6 月前