具有"nowrap“要求的Datatables FixedColumns

Question

我有大量的表格数据，其中最左边的列需要始终显示，并且每行应该只占一行-这可以通过CSS指令white-space: nowrap来实现。

我选择了DataTables jQuery plugin和它的FixedColumns extension，它非常适合我想要做的事情。

但是，在Internet Explorer (我手头有11版)中，我发现网格不能正确对齐--固定的列有自己的滚动条，表头不再与对应的列完全对齐。

我已经创建了一个JSFiddle来演示这个问题- http://jsfiddle.net/tczwysao/11/。您可以看到，如果注释掉空白指令，那么列就会对齐。但我确实需要最左边的列留在一行上。

我的实现方式有没有错，或者有人能建议一个解决办法？

Answer 1

您忘记了加载Bootstrap并添加适当的表类table table-striped table-bordered。

有关更正后的代码的演示，请参阅this jsFiddle。

Answer 2

看起来DTFC_LeftBodyWrapper和DTFC_LeftBodyLiner的高度在你的一个插件中设置的不正确(这是滚动条的问题)。如果您使用firebug进入其中，并删除这些元素上设置的高度，该栏将消失。

至于列标题，这是一个相当糟糕的技巧，但我在标题周围添加了一些填充，它能够正确地设置标题的宽度。

<th class="fixed-column" style="padding: 0 70px">Fixed Column</th>

小菜一碟:在我看来，http://jsfiddle.net/tczwysao/7/在火狐中看起来很不错，但我确实对这个变通方法感到有点油腻。

Answer 3

试试这个，这对我很有效，修复了nowrap的问题

$('#table').DataTable( {
       bAutoWidth: false,
       fnCreatedRow: function( nRow, aData, iDataIndex ) {
          $(nRow).children("td").css("overflow", "hidden");
          $(nRow).children("td").css("white-space", "nowrap");
          $(nRow).children("td").css("text-overflow", "ellipsis");
          },
   });