数据表列边缘未对齐

Question

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

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

这是 plunk 链接-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