响应式表格格式

我有下表,它允许用户(通过jQueryUI滑块-表示为SL1等…)调整当月日照时间的%。我希望这张桌子能做出反应,这样我在电话里看的时候,四个月就可以看到三排桌子了。如何打破第5、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>