Anzahl der Tabellenspalten basierend auf der Breite der Anzeige

Question

Ich entwerfe eine Website und auf dem Desktop habe ich eine 2-Spalten-Tabelle, aber auf Mobilgeräten sieht der Tisch nicht so gut aus. Ist es möglich, die Anzahl der Tabellenspalten basierend auf der Bildschirmbreite zu bestimmen?

Desktop:

 
Cell 1  Cell 2 
Cell 3  Cell 4 

Mobil:

 
Cell 1 
Cell 2 
Cell 3 
Cell 4 

Answer 1

Es kann durch die Anwendung display:flex auf Ihre tr und Einstellen der td Größe in einem media query

table{width:100%;} 
 
tr { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width:100%; 
 
} 
 
td { 
 
    width: 50%; 
 
    border:1px solid blue; 
 
    box-sizing:border-box; 
 
} 
 
@media screen and (max-width:400px) { 
 
    td{width:100%;} 
 
}

<table> 
 
    <tr> 
 
    <td>col 1</td> 
 
    <td>col 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>col 3</td> 
 
    <td>col 4</td> 
 
    </tr> 
 
</table>

erfolgen

Sie können eine Funktionsbeispiel finden here

Answer 2

ich eine ähnliche Frage hier beantwortet haben: Forcing table cell onto new row

Ganz einfach, was Sie versuchen, hier zu tun ist, um eine Tabelle zu machen nicht behave als Tabelle, was eine interessante Umsetzung ist. Das heißt, Sie könnten so etwas tun: https://jsfiddle.net/jz6mypvw/1/

Mit @media Abfragen können Sie zwingen, Ihre Tabelle in Zeilen aufzuteilen, wie das Fenster kleiner wird. Das folgende Beispiel ist 2x2, wenn die Bildschirmbreite < 800px ist, und schließlich eine einzelne Spalte, wenn die Größe < 500px ist.

@media only screen and (max-width: 800px) { 
    table tr td { 
     display: block; 
     width: 50%; 
     box-sizing: border-box; 
     float: left; 
    } 
} 

@media only screen and (max-width: 500px) { 
    table tr td { 
     width: 100%; 
    } 
} 

<table> 
    <tr> 
     <td class="col-1">One</td> 
     <td class="col-2">Two</td> 
     <td class="col-3">Three</td> 
     <td class="col-4">Four</td> 
    </tr> 
</table>