Css 响应表格式

下面的表格允许用户（通过jQuery UI滑块-表示为SL1等…）调整当月太阳时数的百分比。我希望桌上的yo变得灵敏，这样我在通过电话查看时，会有三行四个月的时间。如何打破第5列和第9列的反应

电脑浏览器：

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>

简
二月
破坏
四月
也许
六月
七月
八月
九月
十月
十一月
12月

如果您想在手机上保留所有行（而不是减少行数），FooTables是一个很好的解决方案，我个人使用它：

---

这个jQuery插件提供了许多选项，如何使用它取决于您。

嗨，Antoine，谢谢您的链接。我将研究它如何做上述工作。