Search code examples
jqueryhtmlcssmicrosoft-edgedatatables-1.10

data table column misalignment in edge

I am using datatable plugin. But in edge browser i get column misalignment.

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

Here is the plunk link- https://plnkr.co/edit/rNHLC6gqSJDgdhkvNCa6?p=preview

I am using 'scrollX' to get responsitivity. If I remove scroll X the column alignment seems to be fine. Any leads will be helpful.

Solution

  • Setting the td and the th to white-space: nowrap in your CSS seems to fix this issue in edge.

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

    Here is a fork of your plunker with the proposed change