JQuery DataTable не реагирует на загрузку страницы

Question

По сути, у меня есть набор данных (использующий datatable jquery-плагин), на который я хочу реагировать. Я настроил его в соответствии с документацией, но таблица выходит за пределы контейнера, пока я не изменю размер экрана вручную. Как только я это сделаю, таблица корректно изменяет размеры и становится отзывчивой.

У меня есть датируемые отзывчивые библиотеки CSS и JS, загруженные через CDN

<div class="table-responsive">
<table id="stock" class="table table-responsive display nowrap" cellspacing="0" style="width:100%">
    <thead>
        <tr>
            <th>Species</th>
            <th>Length (mm)</th>
            <th>Width (mm)</th>
            <th>Thickness (mm)</th>
            <th>Provenance</th>
            <th>Cost per board (GBP)</th>
            <th># in stock</th>
            <th>Notes</th>
        </tr>
    </thead>
    <tbody>
        {% for x in dat %}
        <tr>
            <td>{{x.stock_id__species__species_name}}</td>
            <td>{{x.length}}</td>
            <td>{{x.width}}</td>
            <td>{{x.thickness}}</td>
            <td>{{x.stock_id__origin__site_name}}</td>
            <td>{{x.board_value}}</td>
            <td>{{x.nn}}</td>
            <td>{{x.notes|convertblank}}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<script>

$(document).ready(function () {
    var table = $('#stock').DataTable({
        rowReorder: {
            selector: 'td:nth-child(2)'
        },
        responsive: true
    });

    setTimeout(table.columns.adjust().draw(), 300)

    $('#stock').resize()
});

</script>