HTML 表格 - 在移动设备上将每一列转换为手风琴答案

【问题标题】：HTML table - convert each column into accordion on mobileHTML 表格 - 在移动设备上将每一列转换为手风琴
【发布时间】：2017-02-08 16:43:28
【问题描述】：

我有一个表格，第一列是一年中的月份。

还有其他四列 - 当设备突破 768 像素及以下时，我想将四列中的每一列都变成手风琴，列标题作为手风琴名称。每个手风琴包含一个两列的表，一年中的月份和值

因此，当触发移动设备视图时，用户会看到标题为“月收入”的手风琴，并且在该手风琴内

<table>
  <tr>
    <td>January</td>
    <td>200</td>
    </tr>
  <tr>
    <td>February</td>
    <td>250</td>
    </tr>
    <tr>
    <td>March</td>
    <td>200</td>
    </tr>
    <tr>
    <td>April</td>
    <td>240</td>
    </tr>
</table>

【问题讨论】：

标签： jquery html css responsive-design

【解决方案1】：

这确实是一个不可能的问题 - 没有一种方法可以做到这一点，您可以（也许）仅使用 CSS 或 Javascript .. 或许多其他解决方案来做到这一点 - 无需自己为您创建解决方案我可以'不'解决'你的问题。

你可能想看看这个，它可能会给你一些关于如何实现你所追求的想法，我想说这是一个很好的起点来解决你的问题：

https://css-tricks.com/examples/ResponsiveTables/responsive.php

【讨论】：

【解决方案2】：

我认为最简单的解决方案可能是包含一个 CSS 框架，如 Bootstrap 或 MaterializeCSS，它们已经具有可折叠组件，并使用相同的信息创建一个与表格分开的手风琴。然后，您可以使用 CSS 媒体查询在给定断点处切换手风琴和表格的可见性。

例如：

@media (min-width:768px){
        .my-accordion{
              display: none; //hides the accordion when the display is greater than 768px
         }
 }

上述框架也有响应式表格的解决方案。

【讨论】：