CSS使用在平板電腦上查看的Twitter引導程序的響應表

Question

我正在使用Twitter 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

你知道我是否可以調整媒體查詢值，使其在平板電腦上的行爲與手機上的相同？

非常感謝！

菲爾

Answer 1

添加另一個@media (max-width: 1024px) {}？在1,024像素

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; 
    } 
}