Question

我有下表，允许用户（通过jQuery UI滑块 - 表示为SL1等）来调整月份的太阳时数百分比。我希望桌子能够响应，以便在通过电话观看时最终有3行四个月。如何打破col 5，col 9的响应能力？

PC浏览器：

jan  feb  mar  apr  may  jun  jul  aug...
50%  75%  78%  80%  74%  72%  70%  65%
SL1  SL2  SL3  SL4  SL5  SL6  SL7  SL8

电话：

jan  feb  mar  apr  
50%  75%  78%  80%  
SL1  SL2  SL3  SL4

may  jun  jul  aug...
74%  72%  70%  65%
SL5  SL6  SL7  SL8

我目前的HTML是：

<table id="sun-season">
  <thead>
  <tr>
     <th><label for="amount-jan">Jan</label></th>
     <th><label for="amount-feb">Feb</label></th>
     <th><label for="amount-mar">Mar</label></th>
     <th><label for="amount-apr">Apr</label></th>
     <th><label for="amount-may">May</label></th>
     <th><label for="amount-jun">Jun</label></th>
     <th><label for="amount-jul">Jul</label></th>
     <th><label for="amount-aug">Aug</label></th>
     <th><label for="amount-sep">Sep</label></th>
     <th><label for="amount-oct">Oct</label></th>
     <th><label for="amount-nov">Nov</label></th>
     <th><label for="amount-dec">Dec</label></th>
  </tr>
  </thead>
  <tbody>
  <tr>
     <td><input type="text" id="amount-jan" readonly class="mthy-mix"></td>
     <td><input type="text" id="amount-feb" readonly class="mthy-mix"></td>
     <td><input type="text" id="amount-mar" readonly class="mthy-mix"></td>
     <td><input type="text" id="amount-apr" readonly class="mthy-mix"></td>
     <td><input type="text" id="amount-may" readonly class="mthy-mix"></td>
     <td><input type="text" id="amount-jun" readonly class="mthy-mix"></td>
     <td><input type="text" id="amount-jul" readonly class="mthy-mix"></td>
     <td><input type="text" id="amount-aug" readonly class="mthy-mix"></td>
     <td><input type="text" id="amount-sep" readonly class="mthy-mix"></td>
     <td><input type="text" id="amount-oct" readonly class="mthy-mix"></td>
     <td><input type="text" id="amount-nov" readonly class="mthy-mix"></td>
     <td><input type="text" id="amount-dev" readonly class="mthy-mix"></td>
  </tr>
  <tr>
     <td><div id="slider-jan"></div></td>
     <td><div id="slider-feb"></div></td>
     <td><div id="slider-mar"></div></td>
     <td><div id="slider-apr"></div></td>
     <td><div id="slider-may"></div></td>
     <td><div id="slider-jun"></div></td>
     <td><div id="slider-jul"></div></td>
     <td><div id="slider-aug"></div></td>
     <td><div id="slider-sep"></div></td>
     <td><div id="slider-oct"></div></td>
     <td><div id="slider-nov"></div></td>
     <td><div id="slider-dec"></div></td>
  </tr>
  </tbody>
</table>

Answer 1

如果您希望将所有行保留在移动设备上（不要破坏它们），FooTables是一个很好的解决方案，我个人使用它：

http://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/

通过这个jQuery插件可以获得许多选项，由你决定如何使用它。

响应表格式

1 个答案: