表响应式网页设计？

我不知道如何让我的桌子响应移动设备。表响应式网页设计？

这是代码：

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

表响应式网页设计？

回答

相关问题