Question

所以这是针对IE 10和11，我也使用Bootstrap 3。

如果我有桌面显示器，我希望我的桌子有这样的布局：

<table class="table table-responsive">
   <thead>
      <tr>
         <td>Header 1</td>
         <td>Header 2</td>
         <td>Header 3</td>
      </tr>
   </thead>
   <tfoot></tfoot>
   <tbody>
      <tr>
         <td>Data 1</td>
         <td>Data 2</td>
         <td>Data 3</td>
      </tr>
   </tbody>
</table>

在手机（或类似设备）上，我想要这样的布局：

<table class="table table-responsive">
   <thead>
      <tr>
         <td>Header</td>
         <td>Data</td>
      </tr>
   </thead>
   <tfoot></tfoot>
   <tbody>
      <tr>
         <td>Header 1</td>
         <td>Data 1</td>
      </tr>
      <tr>
         <td>Header 2</td>
         <td>Data 2</td>
      </tr>
      <tr>
         <td>Header 3</td>
         <td>Data 3</td>
      </tr>
   </tbody>
</table>

是否有一些或CSS可以让我这样做？或者这只能用javascript（和css）来完成吗？

要清楚，我希望代码检测分辨率并显示两种布局中的一种。

Answer 1

您可以创建两个表并使用css媒体查询在两者之间切换，请参阅小提琴https://jsfiddle.net/5f3pbg8b/17/

python setup.py install

如何根据分辨率更改表格布局？

1 个答案: