Answers

• kthorngren Posts: 21,849Questions: 26Answers: 5,050

  March 2 edited March 3

  scrollX takes a boolean value. A simple Responsive setting takes a boolean value too. Before initializing Datatales check for the screen resolution - possibly the options in this SO thread will work. Then set the scrollX and responsive boolean values appropriately. If you have a more complicated responsive setting then try something like this pseudo code:

  let responsive = false;
  let scrollX = true;
  if ( screenResolution < 1440 ) {
    responsive = { .... };  // All the config options
    scrollX = false;
  }
  
  new DataTable('#example', {
      // Rest of datatables config options
      responsive: responsive,
      scrollX: scrollX
  });
  

  Kevin
• DanielAD Posts: 5Questions: 2Answers: 0

  March 3 edited March 3

  I tried various solutions in JavaScript, but the issue was resolved with the following CSS:

  @media (min-width: 1280px) {
  table.dataTable {
  table-layout: fixed;
  width: 100% !important;
  }
  table.dataTable.nowrap th, table.dataTable.nowrap td {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  }
  }

  this caused a problem where the table's scroll was applied to the body element instead. To fix this, I added the following settings in the DataTable configuration:

  scrollY: 850,
  scrollCollapse: true
• allan Posts: 64,237Questions: 1Answers: 10,600 Site admin

  March 4 edited March 4

  This example shows horizontal scrolling using scrollX, while this example shows Responsive being used.

  I'd be curious to know why neither worked for you? Perhaps you can link to a test case showing the problem?

  table-layout: fixed can be useful, but you need to be very careful with it as well for column widths (no automatic width), and text overflow. I see you've addressed both points by settings all columns to 250px width and hiding overflow. Not always ideal in a flexible width table, but if it works in your case, hurrah.

  Allan