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

Question

我有一张桌子，第一列是一年中的几个月。

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

因此，当触发移动设备视图时，用户会看到带有标题＆＃34; Monthy收入＆＃34;的手风琴。并在那个手风琴中

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这真的是一个不可能的问题 - 没有一种方法可以做到这一点，你可以用CSS或者也许用Javascript或许多其他解决方案来做这个（也许） - 而不用为你自己创造一个解决方案我自己也不能''解决'你的问题。

你可能想看一下这可能会给你一些关于如何实现你的目标的想法，我会说这是解决问题的一个非常好的起点：

arrayfun

你可以在这里阅读所有相关内容

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

Answer 2

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

例如：

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

上述框架还提供了响应表的解决方案。