таблица данных растет из контейнера DIV

Question

Я использую JQuery DataTable

<div id="wrapperDiv"> 

<table id="dataTable"> <!-- data --> </table> 

<div/> 

ширина обертки составляет 960 точек и таблица переходит на 1080 пикселей (она имеет более широкие данные)

Я попытался

- setting width: 100% in table tag inline CSS 
- setting overflow-x auto; in table tag 

И перспективные решения от

jQuery DataTables: control table width

How to set column widths to a jQuery datatable?

DataTables width problem

Jquery DataTables - Table width is shorter than dataTable_wrapper width

Ни один из них не работал для меня, В качестве обходного пути я увеличил ширину обертки DIV, чтобы соответствовать таблице данных. Любая помощь?

Answer 1

У меня была такая же проблема в течение нескольких месяцев, ни одно из предлагаемых решений не устранило мою проблему. Сегодня я решил переработать его, и это сработало. Это не самое элегантное решение, и я бы не сказал, что это «правильный» способ сделать это, но он работает и довольно минимален в своем воздействии.

$(document).scroll(function() { 
      var greatestWidth = 0; 
      $('.dataTable').each(function() { 
       if (greatestWidth < $(this).width()) { 
        greatestWidth = $(this).width(); 
       } 
      }); 

      $('#yourcontainer').width(greatestWidth); 
     }); 

В основном я просто пытаюсь найти самую большую таблицу (будет работать на высоте, а) всякий раз, когда пользователь прокручивает, а затем установите контейнер в том, что ширина. Причина, по которой я должен был сделать это, заключается в том, что я использую ajax и некоторые API-интерфейсы для заполнения данных и настроек, чтобы таблица несколько раз изменялась до ее завершения. Ни одна из функций DataTables не работает из-за некоторого изменения размера и переформатирования, которые происходят после факта, а $ (document) .ready() не работает, потому что таблица изменяется после загрузки документа.

Это некрасиво, но это будет трюк.

Answer 2

Вы можете изменить стиль

@media (min-width: 500px) { 
    .table-responsive { 
     overflow-x: hidden !important; 
    } 
}