I have a table with over 10 columns, and I am using datatables to display the data. I have enabled horizontal scrolling due to the large number of columns, but the scroll is not appearing. Can someone please assist me with this issue? Here is a screenshot of my table: Scroll not working
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Outlet ID</th>
<th>Outlet Name</th>
<th>Date</th>
<th>Day</th>
<th>Day Part</th>
<th>Service</th>
... // additional column headers here
</tr>
</thead>
<tbody>
# Your table content goes here...
</tbody>
</table>
Below are the CSS and script settings for the scroll:
<style>
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
</style>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"scrollY": 300,
"scrollX": true
} );
} );
</script>
I require a horizontal scroll to accommodate my numerous columns. The desired result should look like this: example image