[英]Make responsive bootstrap table horizontal
使用原始表無法實現小屏幕上所需的表結構,因為結構不同。 因此,可以在較小的屏幕上顯示備用表,然后在較小的屏幕上隱藏原始表,反之亦然。
<table id="big-screen">
<tr>
<th>Points</th>
<th>Players</th>
<th>Prizes</th>
</tr>
<tr>
<td>{{ points }}</td>
<td>{{ players }}</td>
<td>{{ prizes }}</td>
</tr>
</table>
<table id="small-screen">
<tr><th>Points</th></tr>
<tr><td>{{ points }}</td></tr>
<tr><th>Players</th></tr>
<tr><td>{{ players }}</td></tr>
<tr><th>Prizes</th></tr>
<tr><td>{{ prizes }}</td></tr>
</table>
@media screen and (max-width: 319px) {
#small-screen {
display: table;
}
#big-screen {
display: none;
}
}
@media screen and (min-width: 320px) {
#small-screen {
display: none;
}
#big-screen {
display: table;
}
}
這是jsfiddle
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.