I've recently encountered an issue with my DataTables not filling 100% of their div width. I'm utilizing Bootstrap and jQuery for this project. Any suggestions or tips to fix this problem?
HTML
<div class="form-group" style="height: 400px; width: 100%;">
<div class="row">
<br>
<table data-role="table" id="datatables2" class="datatables display ui-responsive form-table" style="width: 100%;"> <!--Beginning Table -->
<thead>
<tr>
<th>Staff</th>
<th>Comment</th>
<th>Search</th>
<th>Priority</th>
</tr>
</thead>
<tbody>
</tbody>
</table> <!-- End Table -->
</div>
CSS
table {
overflow-x: auto;
display: block;
width: 100% !important;
font-size: 13px;
}
jQuery
aTable = $('table#datatables2').DataTable({
scrollX: false,
retrive: true,
ordering: false,
bFilter: false,
bPaginate: false,
bInfo: false,
responsive: true
});
Links / Scripts:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.13/r-2.1.1/sc-1.4.2/se-1.2.0/datatables.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/r-2.1.1/sc-1.4.2/se-1.2.0/datatables.min.js"></script>
Safari Image
https://i.sstatic.net/Tf8CQ.png
Google Chrome Image