2

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

我选择了DataTables jQuery 插件以及它的FixedColumns 扩展，它非常适合我想要做的事情。

但是，Internet Explorer（我手头有 11 版）我看到网格没有正确对齐 - 固定列有自己的滚动条，并且表头不再与其对应的列完全对齐。

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

我实施此方法的方式是否有错误，或者任何人都可以提出解决方法？

4

3 回答 3

1

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

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

于 2015-09-04T03:27:32.900 回答
0

看起来您的一个插件的高度DTFC_LeftBodyWrapper和DTFC_LeftBodyLiner设置不正确（这是滚动条问题）。如果您使用萤火虫进入那里并删除这些元素上的设置高度，则该栏会消失..

至于列标题，这是一个非常糟糕的 hack，但我在标题周围放置了一些填充，它能够正确设置标题的宽度。

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

在这里摆弄：http: //jsfiddle.net/tczwysao/7/对我来说在 Firefox 中看起来不错，但我确实对这种解决方法感到有点油腻。

于 2015-09-03T23:26:13.407 回答
0

试试这个，这对我有用，它解决了 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");
          },
   });
于 2020-05-05T15:47:42.103 回答