Отзывчивая таблица HTML, вырезанная на мобильном телефоне

Question

В Bootstrap-Modal у меня есть некоторые Divs и Table. При просмотре на рабочем столе все работает нормально, но когда я открываю сайт на своем телефоне, большая часть стола отключается.

HTML:

<div class="modal portfolio-modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true"> 
    <div class="modal-content table-responsive"> 
     <div class="close-modal" data-dismiss="modal"> 
      X 
     </div> 
     <div class="container eventContainer table-responsive"> 
      <div class="row tableScroll table-responsive"> 
       <div class="col-lg-12 tableScroll table-responsive"> 
        <div class="modal-body tableScroll table-responsive"> 
         <div class="eventTableDiv tableScroll table-responsive" id="eventTableDiv"> 
         </div> 
         <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

@media (max-width: 768px) { 
    table, 
    .eventContainer, 
    .eventTable, 
    .tableScroll, 
    .modal, 
    .modal-content, 
    .row, 
    .modal-body{ 
     overflow-x: auto; 
     display: block; 
    } 
    .eventTable { 
     font-size: 10px; 
    } 
} 

И JS я использую, чтобы сделать таблицу:

function generateEventList(){ 
var htmlString = "<label class='eventLabel'>Events</label><br><table class='eventTable tableScroll'><tr class='tableHeader'><th>When</th><th>Concert Hall</th><th>Event</th><th>Programm</th><th>Ensemble</th ></tr>"; 
var arrayLength = eventListe.length; 
for (var i = 0; i < arrayLength; i++) { 

    htmlString = htmlString.concat("<tr class='tableRow'>"); 
    for (var s = 0; s<5; s++) { 
     htmlString = htmlString.concat("<td class='tableData'>"+eventListe[i][s]+"</td>"); 
    } 
    htmlString = htmlString.concat("</tr>"); 
} 
htmlString=htmlString.concat("</table><br><br>"); 
document.getElementById("eventTableDiv").innerHTML = htmlString; 
} 

Я попробовал все, что я мог бы найти на SO и в других местах.

Веб-сайт можно найти here.

Сво первый модальным называется «Расписание»

Answer 1

Если бы взглянуть на свой веб-сайт, вам необходимо пересмотреть свою таблицу с точки зрения мобильных пользователей. Трудно отобразить таблицу, широко используемую на мобильном устройстве.

Вы можете попробовать это:

1) Радикально уменьшить размер шрифта 2) уменьшить отступы в таблице 3) Проверить минимальная ширина не устанавливается для столбцов таблицы 4) реструктурировать таблицы для отображения вертикально 5) Используйте javascript или jquery, чтобы скрыть переполнение, если пользователь не нажмет больше

Я бы попробовал его в этом заказе.