I have a bootstrap table like
<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>
and this table looks like
The problem is that it looks like this , even in small screens. How can I make it horizontal in small screens, like the following image ?
The desired structure of table on small screen could not be achieved using the original table as the structure is different. So a hack of displaying an alternate table on the smaller screens and hiding the original table on the smaller screen and vice versa would be functional.
<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;
}
}
Here is the jsfiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.