Comment faire pour mieux masquer une colonne de table pour la vue mobile

J'ai un tableau HTML dans un navigateur mobile j'ai besoin de cacher certaines de ses colonnes.

Je veux cacher 2 ou 3 de ces cols, à l'aide de @media requêtes si possible.
le code ci-dessous ne fonctionne pas pour moi:

<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; }
      }
Plan B: mettre un DIV dans chaque cellule. La classe des DIVs par colonne. Masquer les DIVs.
ok, je vois où vous en êtes. Oui si non un poster d'une solution immédiate qui en réalité s'effondre, qui auront à faire 🙂
Si votre requête de média être max-width si vous vous cachez la colonne pour les plus petits écrans?
im codage css pour mobile d'abord, puis en utilisant les media queries pour les ordinateurs de bureau. Ma question a été formulée dans l'autre sens.
Mmm j'ai vu beaucoup. Attribuer une classe pour la partie qui ne peut pas être affichée. Gues quoi? Vous avez encore de demande de données.... Il suffit de ne pas publier des données sur les mobiles. Ou vous vous attendez à ce que tous les utilisateurs ont un accès illimité aux données des limites??

OriginalL'auteur IEnumerable | 2013-07-24

  1. 10

    Quelque chose comme cette? (essayez de redimensionner la fenêtre de Résultat/volet)

    Le code HTML:

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

    Le CSS:

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


    @media only screen and (max-width: 900px) {
        .one{
            display: none;
        }
    }
    oui le jsfiddle semble bon. l'amour c'merci; exactement ce que je cherchais. Pas plus JS 🙂
    n'est-ce pas exactement ce que vous avez écrit dans votre question?
    haha presque 🙂 jusqu'à présent, ce qui fonctionne le mieux
    Oh je vois, c'est effectivement le contraire de ce que vous avez fait.
    c'est une façon de se débarrasser d'un cadavre

    OriginalL'auteur Zubzob

  2. 3

    Conserver votre code HTML et le tableau de balisage propre en utilisant nth-child pour masquer la colonne. Devrait fonctionner avec tous les navigateurs actuels qui prend en charge les requêtes de média.

    Voici un échantillon de violon en la montrant en action. Redimensionner le volet de résultats pour voir comment il fonctionne.

    https://jsfiddle.net/tycahill/xm0nwr7x

    La propre 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>

    Le CSS pour cacher la deuxième colonne:

    @media only screen and (max-width: 800px) {
  td:nth-child(2) {
    display:none;
  }
}
    C'est un bon avant-gardiste de la solution. Je vous remercie.

    OriginalL'auteur Ty the Web Guy

  3. 1

    Plan B: mettre un DIV dans chaque cellule. La classe des DIVs par colonne. Masquer les DIVs. Vous pouvez avoir besoin d'ajuster votre table cellpadding/cellspacing et le mettre sur le .cell DIV afin de maintenir l'apparence précédente.

    <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>
    bon travail avec l' .la cellule - j'ai juste essayé et a bien fonctionné.

    OriginalL'auteur Diodeus - James MacFarlane

  4. 0

    Je pense que votre exemple a la display:block et display:none commuté. Aussi, je vous conseille d'utiliser display: table-cell; au lieu de display: block;, depuis la table-cell est l'affichage par défaut pour <td> éléments. Cette CSS a fonctionné pour moi, et est également un mobile-première approche:

    td.collapsable {display:none; }

@media only screen and (min-width: 450px) {
  td.collapsable {display:table-cell; }
}
    Je vais avoir du mal à faire ce travail, puis-je demander à la classe de juste le th ou chaque td ?
    J'ai appliqué qu'à la td. C'est peut-être un navigateur spécifique de la question; avez-vous testé avec d'autres navigateurs?
    juste FF, ill essayer IE
    Fonctionne sous IE, donc devrait fonctionner sous IE pour mobile.

    OriginalL'auteur user1171848