数据 table 列在边缘未对齐

Question

我正在使用数据表插件。但是在边缘浏览器中，我得到列错位。

$(document).ready(function() {
    $('#example').DataTable( {
              destroy: true,
              paging: false,
              info: false,
              stateSave: true,
              bStateSave: true,
              dom: 't',
              'scrollX': true,
    } );
} );

这是原话 link- https://plnkr.co/edit/rNHLC6gqSJDgdhkvNCa6?p=preview

我正在使用 'scrollX' 来获得响应。如果我删除滚动 X，则列对齐似乎没问题。任何线索都会有所帮助。

Answer 1

在 CSS 中将 td 和 th 设置为 white-space: nowrap 似乎可以解决边缘问题。

  table.dataTable tbody th,
  table.dataTable tbody td {
      white-space: nowrap;
  }

Here is a fork of your plunker with the proposed change

数据 table 列在边缘未对齐

data table column misalignment in edge

html

css

jquery

datatables-1.10

microsoft-edge