HTML-Tabelle - konvertieren jede Spalte in Akkordeon auf Handy

Question

Ich habe eine Tabelle, die die erste Spalte als die Monate des Jahres hat.

Es gibt vier weitere Säulen - wenn das Gerät 768px bricht und unten, ich möchte, dass jeder der vier Spalten in einem Akkordeon mit der Spaltenüberschrift als Akkordeon Namen machen. Jedes Akkordeon enthält eine zweispaltige Tabelle, die Monate des Jahres und die Werte

Also, wenn das mobile Gerät Ansicht ausgelöst wird, kann der Benutzer ein Akkordeon mit der Überschrift „Monthy earnings“ sieht und in diesem Akkordeon

<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

das ist wirklich eine unmögliche Frage ist - gibt es nicht eine Möglichkeit, dies zu tun, könnten Sie nur diese (vielleicht) zu tun mit CSS oder vielleicht mit Javascript .. oder viele andere Lösungen - ohne selbst eine Lösung für Sie zu finden, konnte ich Ihre Frage nicht "lösen".

Vielleicht möchten Sie dies überprüfen, die Sie einige Ideen, wie geben könnte erreichen, was Sie wollen, und ich würde sagen, dass es um Ihre Frage zu lösen, ein wirklich guter Ausgangspunkt ist:

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

Sie können es lesen, alles über hier

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

Answer 2

ich denke, die einfachste Lösung, die ein CSS-Framework wie Bootstrap oderenthalten sein kann 0, die bereits zusammenklappbare Komponente haben und erstellen ein Akkordeon getrennt von der Tabelle mit den gleichen Informationen. Sie können dann CSS-Medienabfragen verwenden, um die Sichtbarkeit Ihrer Tabellen an einem bestimmten Haltepunkt zu ändern.

Zum Beispiel:

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

Die genannten Frameworks auch Lösungen für ansprechende Tabellen haben.