表響應式網頁設計？

我不知道如何讓我的桌子響應移動設備。表響應式網頁設計？

這是代碼：

table { 
 
    overflow-x: auto; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
    font-family: 'Manuale', serif; 
 
} 
 

 
th, 
 
td { 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
tr:nth-child(even) { 
 
    background-color: #f2f2f2; 
 
} 
 

 
th { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
}

<table> 
 
    <tr> 
 
    <th>Time</th> 
 
    <th>When</th> 
 
    <th>Elevation Gain</th> 
 
    <th>Type</th> 
 
    <th>Level</th> 
 
    </tr> 
 
    <tr> 
 
    <td>10-14 hours</td> 
 
    <td>June through October</td> 
 
    <td>1,600 m</td> 
 
    <td>Out and Back</td> 
 
    <td>Not family friendly and moderately trafficed</td> 
 
    </tr> 
 
</table>

我需要使用@media查詢幫助或者翻轉表垂直閱讀或在底部有一個滾動條，所以你可以看到剩下的的表格。

來源

2017-10-19 JLoomis

如果你用overflow-x：auto將整個東西包裝在一個div中，它應該自動處理在屏幕太窄而不能顯示完整數據集的屏幕上滾動。這不是最美觀的，但它會爲您節省很多頭痛，而不是嘗試垂直襬放桌子。 – delinear

https://css-tricks.com/responsive-data-tables/ – VXp

你可以使用唯一的CSS獲得一個響應表，當你需要瀏覽器屏幕然後你分開行。我希望當你看到這個代碼看到這個鏈接jsfiddle.net你會明白如何使用CSS響應表。

@media screen and (max-width: 700px) { 
.width_one, .width_two, .width_three, .width_four { width:inherit;} 
.ncprg_table tr.bg_title { display: none; } 
.ncprg_table, 
.ncprg_table thead, 
.ncprg_table tbody, 
.ncprgtable th, 
.ncprg_table td, 
.ncprg_table tr { 
    display: block; 
} 
.ncprg_table { padding: 0; } 
.ncprg_table thead tr { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 
.ncprg_table tr { 
    padding:0px; 

} 
.ncprg_table td { 
    border: none; 
    border-bottom: 1px solid #747474; 
    position: relative; 
    padding-left: 140px; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -ms-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; 
    padding-top:19px; 
} 
.ncprg_table td { 
    height:38px; 
} 
.ncprg_table td:before { 
    position: absolute; 
    top: 20px; 
    left: 0; 
    width:140px; 
    padding:0 10px 0 15px; 
    white-space: nowrap; 
    font-size:13px; 
    color:#747474; 
    text-align:left; 
} 
.ncprg_table td:nth-of-type(1):before { content: "Standard - CPR/AED"; } 
.ncprg_table td:nth-of-type(2):before { content: "Modules"; } 
.ncprg_table td:nth-of-type(3):before { content: "Training"; } 
.ncprg_table td:nth-of-type(4):before { content: "Validity"; } 
.ncprg_table td:nth-of-type(5):before { content: "Certification"; } 
.ncprg_table td:nth-of-type(6):before { content: "Duration"; } 
.ncprg_table td:nth-of-type(7):before { content: "AHA &amp; ECC"; } 
.ncprg_table td:nth-of-type(8):before { content: "Exam Attempts"; } 
.ncprg_table td:nth-of-type(9):before { content: "Vinyl Wallet Card"; } 
.ncprg_table td:nth-of-type(10):before { content: "Cert. &amp; Card Download"; } 
.ncprg_table th, 
.ncprg_table td { 
    font-size: 13px; 
} 
}

來源

2017-10-19 13:07:38

表響應式網頁設計？

回答

相關問題