Здравствуйте. У меня есть страница, на которой есть около 17 таблиц. Они разделены с помощью табов. На первом табе одна таблица с datatables HTML: <table class="table table-bordered table-hover display" id="example" style="width:100%">......</table> Код: $(document).ready(function() { var table = $('#example').DataTable( { "lengthMenu": [[10, 15, 25, -1], [10, 15, 25, "Всё"]], scrollY: "700px", scrollX: "200%", scrollCollapse: true, paging: true, responsive: true, stateSave: true, language: { "processing": "Подождите...", "search": "Поиск:", "lengthMenu": "Показать _MENU_ записей", "info": "Записи с _START_ до _END_ из _TOTAL_ записей", "infoEmpty": "Записи с 0 до 0 из 0 записей", "infoFiltered": "(отфильтровано из _MAX_ записей)", "infoPostFix": "", "loadingRecords": "Загрузка записей...", "zeroRecords": "Записи отсутствуют.", "emptyTable": "В таблице отсутствуют данные", "paginate": { "first": "Первая", "previous": "Предыдущая", "next": "Следующая", "last": "Последняя" }, "aria": { "sortAscending": ": активировать для сортировки столбца по возрастанию", "sortDescending": ": активировать для сортировки столбца по убыванию" } } } ); new $.fn.dataTable.FixedColumns(table, { leftColumns: 3, heightMatch: 'auto' } ); } ); На втором табе остальные таблицы. Они однотипные и создаются в цикле. HTML: <table class="table table-bordered table-hover display example_small" style="width:100%">......</table> Код: $(document).ready(function() { var table_small = $('.example_small').DataTable({ scrollX: true, paging: false, responsive: true, searching: false, bInfo: false }); new $.fn.dataTable.FixedColumns(table_small, { leftColumns: 1, heightMatch: 'auto' } ); } ); Проблема в том что при переключении табов теряется внешний вид таблиц. Получается каша. Я думаю, что как то неправильно воспользовался datatables. Подскажите пожалуйста.