datatables double adjust

Requires double adjustment on tab reload

HTML

<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">		

        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">

		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
		
		<title>DataTables Test</title>

        <html lang="en">
            <head>

            </head>

            <body>
                <div class="wrapper container-flluid" id="datatablestest">
                    <div id="mainbody">
                        <div role="tabpanel">
                            <ul class="nav nav-tabs" role="tablist" id="tabs">
                                <li role="presentation" class="nav-item">
                                    <a class="nav-link" href="#tab1" role="tab" data-toggle="tab">Tab 1</a>
                                </li>
                                <li role="presentation" class="nav-item">
                                    <a class="nav-link active" href="#tab2" role="tab" data-toggle="tab">Tab 2</a>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane" id="tab1">
                                <table id="tab1table" class="table table-striped table-bordered" cellspacing="0" style="width: 100%;">
                                    <thead>
                                        <th>Col 1</th>
                    ...

JavaScript

$(document).ready(function() {
                $('#tab1table').dataTable({
                    columns: [
                        {
                            data: null
                        },
                        {data: 'col1'},
                        {data: 'col2'},
                        {data: 'col3'},
                        {data: 'col4'},
                        {data: 'col5'},
                        {data: 'col6'},
                        {data: 'col7'},
                    ],
                    columnDefs: [
                        {
                            targets: [0],
                            defaultContent: '',
                            render: function(data, type, row) {
                                return '<div data-i="' + data.i + '" class="displaydetails" style="cursor: pointer;"><i class="fa fa-binoculars"></i></div>';
                            },
                            orderable: false,
                            searchable: false
                        }
                    ],
                    autoWidth: true,
                    deferRender: true,
                    processing: true,
                    //responsive: true,
                    scrollCollapse: true,
                    scroller: {
                        loadingIndicator: true
                    },
                    scrollX: false,
                    scrollY: '200px',
                    serverSide: true,
                    ajax: function (data, callback, settings) {
                        var out = [];

                        for (var i=data.start, ien=data.start + data.length; i < ien ; i++) {
                            out.push({
                                i: i,
                                col1: 'row-' + i + ':-col2',
                                col2: 'row-' + i + ':nowisthetimetosupport-col3',
                                col3: 'row-' + i + ':-col4',
                                col4: 'row-' + i +...