JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/1.5.1/css/scroller.dataTables.min.css">
<script src="https://cdn.datatables.net/scroller/1.5.1/js/dataTables.scroller.min.js"></script>
<div style="width: 600px;">
<table id="example" class="wrap" width="100%">
<thead>
<tr>
<th >Name</th>
<th >Position</th>
<th >Office</th>
<th >Age</th>
<th >Start date</th>
<th >Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td >Tiger Nixon</td>
<td >System Architect</td>
<td >Edinburgh</td>
<td >61</td>
<td >2011/04/25</td>
<td >$320,800</td>
</tr>
<tr>
<td >Garrett Winters</td>
<td >Accountant</td>
<td >Tokyo</td>
<td >63</td>
<td >2011/07/25</td>
<td >$170,750</td>
</tr>
<tr>
<td >Ashton Cox</td>
<td >Junior Technical Author</td>
<td >San Francisco</td>
<td >66</td>
<td >2009/01/12</td>
<td >$86,000</td>
</tr>
<tr>
<td >Cedric Kelly</td>
<td >Senior Javascript Developer</td>
<td >Edinburgh</td>
<td >22</td>
<td >2012/03/29</td>
<td >$433,060</td>
</tr>
<tr>
<td >Airi Satou</td>
<td >Accountant</td>
<td >Tokyo</td>
<td >33</td>
<td >2008/11/28</td>
<td >$162,700</td>
</tr>
<tr>
<td >Brielle Williamson</td>
<td >Integration Specialist</td>
<td >New York</td>
<td >61</td>
<td >2012/12/02</td>
<td >$372,000</td>
</tr>
<tr>
<td >Herrod Chandler</td>
<td >Sales Assistant</td>
<td...
CSS
table {
table-layout:fixed;
}
table td {
word-wrap: break-word;
max-width: 400px;
}
#example td {
white-space:inherit;
}
JavaScript
$(document).ready(function () {
$('#example').DataTable({
scrollY: 200,
scrollX: false,
deferRender: true,
scroller: true
});
$('#example td').css('white-space','initial');
});