sWidth for 2 Tables in Seperate Tabs not working properly

Fritzy

Hi so I have a 2 tabs on the page. Each tab has seperate tables which also have unique IDs Yet when I try to load one the other doesn't have the specified width I like unless i change the size of the screen or make my browser smaller then the other table will lose it's specified width.

I have a file that has the tabs in them. Then I load the content for each in the same file. The tab contents are separate files from this.

here is the script i'm using. They are basically on the same page one the document is ready.
<script>
$(document)..ready(
function(){
var table = $('#documentList').DataTable( {
"order": [[ 0, "asc" ]],
fixedHeader: true,
responsive: true,
columnDefs: [ {
orderable: false,
targets: [0,1],
} ],
"aoColumnDefs": [
{ "sWidth": "70px", "aTargets": [ 1 ] }
],
})
});
</script>
<script>
$(document).ready(
function(){
var table = $('#questionList').DataTable( {
"order": [[ 0, "asc" ]],
colReorder: true,
fixedHeader: true,
responsive: true,
columnDefs: [ {
orderable: false,
targets: [0,1],
} ],
"aoColumnDefs": [
{ "sWidth": "100px", "aTargets": [ 1 ] }
],
})
});
</script>
Is there anything wrong or way to fix this?