我有一个像
这样的引导表 <table class="table-responsive" >
<th> Points </th>
<th> Players </th>
<th> Prizes </th>
<tr>
<td>{{ points }}</td>
<td>{{ players }}</td>
<td>{{ prizes }}</td>
</tr>
</table>
这个表看起来像
问题是它看起来像这样,即使在小屏幕上也是如此。如何在小屏幕中使其水平,如下图所示?
答案 0 :(得分:1)
由于结构不同,使用原始表无法实现小屏幕上所需的表格结构。因此,在较小的屏幕上显示备用表并将原始表隐藏在较小屏幕上(反之亦然)的黑客将会起作用。
<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