Come nascondere meglio una colonna di tabella per la visualizzazione mobile

Question

Ho una tabella HTML, in un browser mobile ho bisogno di nascondere alcune delle sue colonne.

Desidero nascondere 2 o 3 di queste colonne utilizzando le query @media se possibile. il codice qui sotto non ha funzionato per me:

<table> 
    <tr> 
     <td></td> 
     <td class='collapsable'></td> 
     <td class='collapsable'></td> 
     <td></td> 
    </tr> 
</table> 


     //hide cols here 
     td.collapsable {display:block; } 

     @media only screen and (min-width: 450px) { 
      //show cols here 
      td.collapsable {display:none; } 
     } 

Answer 1

Qualcosa di simile this? (provare a ridimensionare la finestra Risultato/riquadro)

Il codice HTML:

<tr> 
    <td class="one">corpse</td> 
    <td>corpse</td> 
    <td>corpse</td> 
</tr> 

Il CSS:

table{ 
     width: 50%; 
    } 
    td, th{ 
     border: 1px solid orange; 
    } 


    @media only screen and (max-width: 900px) { 
     .one{ 
      display: none; 
     } 
    } 

Answer 2

Piano B: mettere un DIV in ogni cella. Class i DIV per colonna. Nascondi i DIV. Potrebbe essere necessario regolare il riquadro di celle/il celling della tabella e metterlo sul DIV .cell per mantenere l'aspetto precedente.

<table> 
    <tr> 
     <td><div class='cell'></div></td> 
     <td><div class='cell collapsable'></div></td> 
     <td><div class='cell collapsable'></div></td> 
     <td><div class='cell'></div></td> 
    </tr> 
</table> 

Answer 3

penso che il vostro esempio ha il display:block e display:none commutato. Inoltre, ti consigliamo di utilizzare display: table-cell; anziché display: block;, poiché la cella della tabella è la visualizzazione predefinita per gli elementi <td>. Questo CSS ha funzionato per me, ed è anche un cellulare-primo approccio:

td.collapsable {display:none; } 

@media only screen and (min-width: 450px) { 
    td.collapsable {display:table-cell; } 
} 

Answer 4

Tenere il codice HTML e tavolo markup pulita utilizzando nth-child a nascondere la colonna. Dovrebbe funzionare con tutti i browser moderni che supportano le query multimediali.

Ecco un esempio di violino che lo mostra in azione. Ridimensiona il riquadro dei risultati per vederlo funzionare.

https://jsfiddle.net/tycahill/xm0nwr7x

Il pulita HTML:

<table> 
    <tr> 
    <td>Column 1a</td> 
    <td>Column 2a</td> 
    <td>Column 3a</td> 
    </tr> 
    <tr> 
    <td>Column 1b</td> 
    <td>Column 2b</td> 
    <td>Column 3b</td> 
    </tr> 
</table> 

Il CSS per nascondere la seconda colonna:

@media only screen and (max-width: 800px) { 
    td:nth-child(2) { 
    display:none; 
    } 
}