响应式表格格式答案

【问题标题】：Responsive table formatting响应式表格格式
【发布时间】：2017-07-31 03:57:11
【问题描述】：

我有下表，它允许用户（通过 jQuery UI 滑块 - 表示为 SL1 等...）调整该月的日照时间百分比。我希望你的表变得有响应，这样当我通过电话查看它时，我最终会得到 3 行，每行 4 个月。如何打破 col 5, col 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>

【问题讨论】：

标签： css responsive-design html-table

【解决方案1】：

如果您愿意将所有行都保留在移动设备上（而不是减少它们的破坏），FooTables 是一个很好的解决方案，我个人正在使用它：

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

这个 jQuery 插件提供了许多选项，您可以自行决定如何使用它。

【讨论】：

您好 Antoine，感谢您的链接。我会研究它是如何做到上述的。