I'm facing an issue with my datatable where the header is misaligned with the content. Can someone please assist me in adjusting the header and content so that they are parallel? It doesn't look right at the moment.
<div style="margin-top:10px; padding: 10px;">
<table id="example" class="table display nowrap table-bordered table-striped" style="width:100%;">
<thead>
<tr>
<th>Test1</th>
<th>Test2</th>
<th>Test34567</th>
<th>Test890</th>
</tr>
</thead>
<tbody>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tbody>
</table>
</div>
$(document).ready(function() {
$('#example').DataTable({
scrollX: true
});
});