JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.datatables.net/v/zf/dt-1.10.12/fc-3.2.2/fh-3.1.2/datatables.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/sc-1.4.2/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-2.2.3/dt-1.10.12/sc-1.4.2/datatables.min.css">
<!-- This is correct CSS, but fails -->
<table id="table1">
<caption style="caption-side: bottom;">Table 1</caption>
<thead><tr><th>One</th><th>Two</th></tr></thead>
<tbody><tr><td>1</td><td>2</td></tr><tr><td>I</td><td>II</td></tr></tbody>
</table>
<br><br><br><br><hr><br><br><br><br>
<!-- This is incorrect CSS, but works -->
<table id="table2" style="caption-side: bottom;">
<caption>Table 2</caption>
<thead><tr><th>One</th><th>Two</th></tr></thead>
<tbody><tr><td>1</td><td>2</td></tr><tr><td>I</td><td>II</td></tr></tbody>
</table>

JavaScript

$('table').attr('width', '100%').DataTable({
	scrollX: true,
  paging: false,
  searching: false,
  info: false
});