Possible regression in latest version of DataTables?

Possible regression in latest version of DataTables?

greenflashgreenflash Posts: 45Questions: 2Answers: 0

I have just upgraded to the latest version of DataTables and the associated extensions. I've found that my tables, which should be 100% width, are no longer 100% width, unless the window is narrow enough to force scrolling. I suspect that I am probably misusing DataTables, rather than a bug, but if so what am I doing wrong? Here is a test program below which exhibits the problem when the window is expanded to full screen width. If you uncomment the two script lines in comments to revert to the previous versions I was using and comment out the current versions you will see that it used to work OK.

Campbell

<!DOCTYPE html>
<html>
<head>
    <title></title>
  
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.5/css/fixedColumns.dataTables.min.css"/>
  
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    
    th, td {
      text-align: left;
      border: 1px solid red;
      white-space: nowrap;
    }
    
  </style>
  

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  
  <!-- Used to work OK with these
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.9/datatables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.0.3/js/dataTables.fixedColumns.min.js"></script>
  -->
  
  <!-- Doesn't work with these -->
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.5/js/dataTables.fixedColumns.min.js"></script>
  
  <script type="text/javascript">
  $(document).ready( function () {
      $('table').DataTable({
          scrollX: '100%',
          fixedColumns: {
              leftColumns: 1
          }
        });
  } );
  </script>
  
</head>

<body>

<table>
  <thead>
    <tr><th>Name</th><th>Role</th><th>Office</th><th>Notes</th></tr>
  </thead>
  <tbody>
    <tr><td>John Smith</td><td>Managing director</td><td>San Francisco</td><td>ggggb jhjjhjh fgfff</td></tr>
  </tbody>
</table>

</body>
</html>

Answers

  • allanallan Posts: 48,322Questions: 1Answers: 6,976 Site admin

    Add style="width:100%" or width="100%" to your table element. It was changed to allow the table to collapse rather than always forcing 100%.

    Allan

  • greenflashgreenflash Posts: 45Questions: 2Answers: 0

    Yes, thanks, that fixes it. However, one of the reasons I was upgrading to the latest version of DataTables was to see if DataTables still uses inline styles and thus will fall foul of any site that has a Content Security Policy of style-src 'self'. It looks as though it still does as I'm still getting refusal messages in my Chrome console, but even if DataTables conformed then having to use style="width: 100%" would mean that my code wouldn't conform. I haven't checked whether width="100%" would be OK under the CSP, but even if it is, the width attribute is deprecated so that's not an ideal solution. Are there any plans to make DataTables conform to a CSP of style-src 'self'? I am a developer on an open source project and we have a few sites that run with a CSP of default-src 'self' and are forced to relax their policies.

  • greenflashgreenflash Posts: 45Questions: 2Answers: 0

    width="100%" doesn't violate the CSP, so if DataTables didn't use inline styles that would be great.

Sign In or Register to comment.