Possible regression in latest version of DataTables?
Possible regression in latest version of DataTables?
greenflash
Posts: 58Questions: 5Answers: 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>
This discussion has been closed.
Answers
Add
style="width:100%"orwidth="100%"to yourtableelement. It was changed to allow the table to collapse rather than always forcing 100%.Allan
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 usestyle="width: 100%"would mean that my code wouldn't conform. I haven't checked whetherwidth="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 ofstyle-src 'self'? I am a developer on an open source project and we have a few sites that run with a CSP ofdefault-src 'self'and are forced to relax their policies.width="100%"doesn't violate the CSP, so if DataTables didn't use inline styles that would be great.