CSS Таблицы ответов, использующие Twitter Загрузочный бокс, просматриваемый на планшете

Question

Я использую CSS Bootstrap CSS для создания гибкой таблицы, которая выглядит нормально на рабочем столе, но прокручивается горизонтально на мобильном устройстве.

Вы можете увидеть здесь:

http://www.bonhard.com/nastodolci/penzion/ceny/

CSS-я использую это:

@media (max-width: 767px) { 
    .table-responsive { 
    width: 100%; 
    margin-bottom: 15px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    -webkit-overflow-scrolling: touch; 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
    border: 1px solid #ddd; 
    } 
    .table-responsive > .table { 
    margin-bottom: 0; 
    } 
    .table-responsive > .table > thead > tr > th, 
    .table-responsive > .table > tbody > tr > th, 
    .table-responsive > .table > tfoot > tr > th, 
    .table-responsive > .table > thead > tr > td, 
    .table-responsive > .table > tbody > tr > td, 
    .table-responsive > .table > tfoot > tr > td { 
    white-space: nowrap; 
    } 
    .table-responsive > .table-bordered { 
    border: 0; 
    } 
    .table-responsive > .table-bordered > thead > tr > th:first-child, 
    .table-responsive > .table-bordered > tbody > tr > th:first-child, 
    .table-responsive > .table-bordered > tfoot > tr > th:first-child, 
    .table-responsive > .table-bordered > thead > tr > td:first-child, 
    .table-responsive > .table-bordered > tbody > tr > td:first-child, 
    .table-responsive > .table-bordered > tfoot > tr > td:first-child { 
    border-left: 0; 
    } 
    .table-responsive > .table-bordered > thead > tr > th:last-child, 
    .table-responsive > .table-bordered > tbody > tr > th:last-child, 
    .table-responsive > .table-bordered > tfoot > tr > th:last-child, 
    .table-responsive > .table-bordered > thead > tr > td:last-child, 
    .table-responsive > .table-bordered > tbody > tr > td:last-child, 
    .table-responsive > .table-bordered > tfoot > tr > td:last-child { 
    border-right: 0; 
    } 
    .table-responsive > .table-bordered > tbody > tr:last-child > th, 
    .table-responsive > .table-bordered > tfoot > tr:last-child > th, 
    .table-responsive > .table-bordered > tbody > tr:last-child > td, 
    .table-responsive > .table-bordered > tfoot > tr:last-child > td { 
    border-bottom: 0; 
    } 
} 

Теперь это прекрасно работает на настольном компьютере и мобильном телефоне. Однако на планшете это выглядит смешно. Проверьте это с уменьшенным размером окна до 1024x768

Знаете ли вы, могу ли я настроить значения медиа-запросов, чтобы заставить его вести себя на планшете так же, как на мобильном?

большое спасибо!

Phil

Answer 1

Добавить еще @media (max-width: 1024px) {} ?? чтобы реагировать на 1024px

Answer 2

Пожалуйста, добавьте этот код в CSS файл ..

@media (max-width: 1052px) { 
    .table-responsive { 
    width: 100%; 
    margin-bottom: 15px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    -webkit-overflow-scrolling: touch; 
    -ms-overflow-style: -ms-autohiding-scrollbar; 
    border: 1px solid #ddd; 
    } 
}