Collapse HTML-Tabelle auf einzelne Tabellen durch Spalte

Question

Ich habe eine HTML-Tabelle wie folgt:

Ich will jede Spalte für mobile Breite gemäß dem folgenden Bild sehen kollabieren:

Das Problem, das ich habe, ist die Tabelle ist kollabiert pro Zeile und Spalte nicht. Könnte mich jemand bitte in die richtige Richtung weisen, oder gibt es einen einfacheren Weg, dies zu erreichen?

Ist es auch möglich, die Tabellenüberschriften 'Eingang 1' usw. anzuzeigen, wenn sie zusammengelegt sind?

Ich habe meinen Code unten enthalten, vielen Dank

HTML:

<div id="page-wrap"> 
<table> 
    <thead> 
    <tr> 
     <th class="one"></th> 
     <th>Entrance 1</th> 
     <th>Entrance 2</th> 
     <th>Entrance 3</th> 
     <th>Entrance 4</th> 
     <th>Entrance 5</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="one">Option 1</td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
    </tr> 
    <tr> 
     <td class="one">Option 2</td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
    </tr> 
    <tr> 
     <td class="one">Option 3</td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
    </tr> 
    <tr> 
     <td class="one">Option 4</td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
    </tr> 
    <tr> 
     <td class="one">Option 5</td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
     <td><input type="checkbox"></td> 
    </tr> 
    </tbody> 
</table> 
</div> 

CSS:

<style> 


@media 
only screen and (max-width: 760px), 
(min-device-width: 768px) and (max-device-width: 1024px) { 

     .one{ 
     display: none; 
    } 

    /* Force table to not be like tables anymore */ 
    table, thead, tbody, th, td, tr { 
     display: block; 
    } 

    /* Hide table headers (but not display: none;, for accessibility) */ 
    thead tr { 
     position: absolute; 
     top: -9999px; 
     left: -9999px; 
    } 

    tr { border: 1px solid #ccc; } 

    td { 
     /* Behave like a "row" */ 
     border: none; 
     border-bottom: 1px solid #eee; 
     position: relative; 
     padding-left: 50%; 
    } 

    td:before { 
     /* Now like a table header */ 
     position: absolute; 
     /* Top/left values mimic padding */ 
     top: 6px; 
     left: 6px; 
     width: 45%; 
     padding-right: 10px; 
     white-space: nowrap; 
    } 

    /* 
    Label the data 
    */ 
    td:nth-of-type(2):before { content: "Option 1"; } 
    td:nth-of-type(3):before { content: "Option 2"; } 
    td:nth-of-type(4):before { content: "Option 3"; } 
    td:nth-of-type(5):before { content: "Option 4"; } 
    td:nth-of-type(6):before { content: "Option 5"; } 

} 

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
     .one{ 
     display: none; 
    } 

    body { 
     padding: 0; 
     margin: 0; 
     width: 320px; } 
    } 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
     .one{ 
     display: none; 
    } 
    body { 
     width: 495px; 
    } 
} 

</style> 

Answer 1

Warum so etwas wie dies nicht tun, werden Sie nur die bearbeiten haben Zelle, die das Kontrollkästchen enthält, um anzuzeigen, mit welchem ​​Eingang es verknüpft ist.

@media 
 
only screen and (max-width: 760px), 
 
(min-device-width: 768px) and (max-device-width: 1024px) { 
 

 
     .one{ 
 
     display: none; 
 
    } 
 

 
    /* Force table to not be like tables anymore */ 
 
    table, tbody, th, td, tr { 
 
     display: block; 
 
    } 
 
    thead{display:none;} 
 

 
    /* Hide table headers (but not display: none;, for accessibility) */ 
 
    thead td { 
 
     position: absolute; 
 
     top: -9999px; 
 
     left: -9999px; 
 
    } 
 

 
    td { border: 1px solid #ccc; } 
 

 
    tr { 
 
     /* Behave like a "row" */ 
 
     border: none; 
 
     border-bottom: 1px solid #eee; 
 
     position: relative; 
 
     padding-left: 50%; 
 
    } 
 

 
    tr:before { 
 
     /* Now like a table header */ 
 
     position: absolute; 
 
     /* Top/left values mimic padding */ 
 
     top: 6px; 
 
     left: 6px; 
 
     width: 45%; 
 
     padding-right: 10px; 
 
     white-space: nowrap; 
 
    } 
 

 
    /* 
 
    Label the data 
 
    */ 
 
    tr:nth-of-type(1):before { content: "Option 1"; } 
 
    tr:nth-of-type(2):before { content: "Option 2"; } 
 
    tr:nth-of-type(3):before { content: "Option 3"; } 
 
    tr:nth-of-type(4):before { content: "Option 4"; } 
 
    tr:nth-of-type(5):before { content: "Option 5"; } 
 
} 
 

 
/* Smartphones (portrait and landscape) ----------- */ 
 
@media only screen 
 
and (min-device-width : 320px) 
 
and (max-device-width : 480px) { 
 
     .one{ 
 
     display: none; 
 
    } 
 

 
    body { 
 
     padding: 0; 
 
     margin: 0; 
 
     width: 320px; } 
 
    } 
 

 
/* iPads (portrait and landscape) ----------- */ 
 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
 
     .one{ 
 
     display: none; 
 
    } 
 
    body { 
 
     width: 495px; 
 
    } 
 
}

<div id="page-wrap"> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th class="one"></th> 
 
     <th>Entrance 1</th> 
 
     <th>Entrance 2</th> 
 
     <th>Entrance 3</th> 
 
     <th>Entrance 4</th> 
 
     <th>Entrance 5</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="one">Option 1</td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="one">Option 2</td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="one">Option 3</td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="one">Option 4</td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="one">Option 5</td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
     <td><input type="checkbox"></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</div>