使响应式引导表水平

时间:2016-03-17 10:58:35

标签: html css twitter-bootstrap responsive-design html-table

我有一个像

这样的引导表
 <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>

这个表看起来像

enter image description here

问题是它看起来像这样,即使在小屏幕上也是如此。如何在小屏幕中使其水平,如下图所示?

enter image description here

1 个答案:

答案 0 :(得分:1)

由于结构不同,使用原始表无法实现小屏幕上所需的表格结构。因此,在较小的屏幕上显示备用表并将原始表隐藏在较小屏幕上(反之亦然)的黑客将会起作用。

HTML

<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>

CSS

@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