Wie können bestimmte Spalten (aus einer Tabelle) auf Mobilgeräten versteckt werden?

Question

Ich habe große Probleme mit der Verwendung von Tabellen - sie sehen perfekt auf einem Desktop aus - aber nicht auf dem Handy. Also hier ist eine Zerschlagung von dem, was ich tun möchte:

• Wenn @media Bildschirm 600px ist dann die Anzahl der Spalten = 3 & die Anzahl der Zeilen = 3

• wenn @media Bildschirm 460PX oder weniger dann column = 2, rowCount = 4

• und column = 4, rowCount = 4 auf Desktop-

Wie kann ich das erreichen?

Answer 1

Ausblenden der zweiten Spalte in einer Tabelle auf einem Bildschirm schmaler als 600 Pixel und zusätzlich die dritte Spalte versteckt auf einem Bildschirm schmaler als 460 Pixel, geht wie folgt:

@media screen and (max-width: 600px) { 
    tr > *:nth-child(2) { 
     display: none; 
    } 
} 

@media screen and (max-width: 460px) { 
    tr > *:nth-child(3) { 
     display: none; 
    } 
} 

Ändern Sie die Spaltennummern nach Ihren Wünschen (2 und 3).

WARNUNG: Ich denke nicht, dass dies eine gute Lösung ist, da eine wirklich reaktionsschnelle Tabelle alle Inhalte auf allen Bildschirmgrößen anzeigt. Im Allgemeinen denke ich, dass Inhalte auf Mobilgeräten und Desktops identisch sein sollten. Diese Antwort wird nur hinzugefügt, um die genauen Anforderungen des OP zu erfüllen.

Answer 2

Sie können diese nette Lösung auf Mobile von CSS-Tricks verwenden. Diese Lösung macht Ihren Tisch mobil zugänglich, selbst wenn der Bildschirm zu schmal ist. Es versteckt KEINE Spalten (daher macht es Ihren Tisch wirklich ansprechend).

html,body { 
 
    margin: 20px; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    display: flex; 
 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
 
    font-size: 90%; 
 
    color: #333; 
 
    justify-content: center; 
 
} 
 

 
.table-wrapper { 
 
    max-width: 700px; 
 
    overflow: scroll; 
 
} 
 

 
table { 
 
    position: relative; 
 
    border: 1px solid #ddd; 
 
    border-collapse: collapse; 
 
} 
 

 
td, th { 
 
    white-space: nowrap; 
 
    border: 1px solid #ddd; 
 
    padding: 20px; 
 
    text-align: center; 
 
} 
 

 
th { 
 
    background-color: #eee; 
 
    position: sticky; 
 
    top: -1px; 
 
    z-index: 2; 
 
    
 
    &:first-of-type { 
 
    left: 0; 
 
    z-index: 3; 
 
    } 
 
} 
 

 
tbody tr td:first-of-type { 
 
    background-color: #eee; 
 
    position: sticky; 
 
    left: -1px; 
 
    text-align: left; 
 
}

<div class="table-wrapper"> 
 
    <table> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
     <th>A</th> 
 
     <th>B</th> 
 
     <th>C</th> 
 
     <th>D</th> 
 
     <th>E</th> 
 
     <th>F</th> 
 
     <th>G</th> 
 
     <th>H</th> 
 
     <th>I</th> 
 
     <th>J</th> 
 
     <th>K</th> 
 
     <th>L</th> 
 
     <th>M</th> 
 
     <th>N</th> 
 
     <th>O</th> 
 
     <th>P</th> 
 
     <th>Q</th> 
 
     <th>R</th> 
 
     <th>S</th> 
 
     <th>T</th> 
 
     <th>U</th> 
 
     <th>V</th> 
 
     <th>W</th> 
 
     <th>X</th> 
 
     <th>Y</th> 
 
     <th>Z</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Anna</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>James</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jennifer</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
     <td>3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jeremiah</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
     <td>4</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jocelyn</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
     <td>5</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Benjamin</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
     <td>6</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Zed</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
     <td>7</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Frank</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
    <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
     <td>8</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Chris</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
     <td>9</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Sarah</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
     <td>10</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Rob</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
     <td>11</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Danielle</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
     <td>12</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Jessica</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
     <td>13</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</div>

Beachten Sie, dass ein ein Desktop-Tisch normalerweise passen sollte. Auf Mobilgeräten ist es natürlich nicht möglich. Dort benötigen Sie einige CSS-Tricks, um Dinge zum Laufen zu bringen. Dieser Code macht das möglich.

Quelle und Dokumentation: https://css-tricks.com/idea-simple-responsive-spreadsheet/