jquery - HTML 表格 - 在移动设备上将每一列转换为 Accordion

Question

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

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

因此，当移动设备 View 被触发时，用户会看到标题为“Monthy earnings”的 Accordion ，并且在该 Accordion 中

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

Answer 1

这真的是一个不可能的问题 - 没有一种方法可以做到这一点，你可以(也许)只用 CSS 或 Javascript .. 或许多其他解决方案 - 如果我自己不能为你创建解决方案‘解决’你的问题。

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

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

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

https://css-tricks.com/responsive-data-tables/