-1
votes

Tables adaptatives mobiles sur la grille

J'ai une table construite sur la grille. Et je veux faire ce tableau adaptatif. Adaptive pour les appareils mobiles. Je ne sais pas comment je peux faire cela en utilisant une table à base de grille. S'il vous plaît dites-moi comment je peux l'adapter pour les écrans mobiles? Le remplissage automatique n'est pas exactement ce dont vous avez besoin. Il bouge simplement des blocages, semblables à une enveloppe de flexion. Avec affichage: table, c'est plus facile. Aidez-moi s'il vous plaît.

<div class="table">
  <div class="table_unit">
    <p>This is text</p>
  </div>
  <div class="table_unit">
    <p>This is text</p>
  </div>
  <div class="table_unit">
    <p>This is text</p>
  </div>
  <div class="table_unit">
    <p>This is text</p>
  </div>
  <div class="table_unit">
    <p>This is text</p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p></p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p></p>
  </div>

  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <input type="submit" class="log_button_replace" value="Simple button">
  </div>
</div>

html css css-grid

3 commentaires

Seul ne va pas rétrécir jusqu'à ce qu'une certaine largeur soit atteinte. Après cela, il déborde horizontalement. Que voulez-vous de plus?

J'ai besoin de faire les principaux noms où "c'est texte" est écrit passe à la gauche

Je veux faire comme ça, mais seulement sur la grille - Codepen.io / Team / CSS-Tricks / Pen / WXGJWW? Éditeurs = 1100

3 Réponses :

0
votes

J'espère que c'est ce que vous attendez. Ajoutez simplement l'extrait ci-dessous dans votre code.

<div class="table">
  <div class="table_unit">
    <p>This is text</p>
  </div>
  <div class="table_unit">
    <p>This is text</p>
  </div>
  <div class="table_unit">
    <p>This is text</p>
  </div>
  <div class="table_unit">
    <p>This is text</p>
  </div>
  <div class="table_unit">
    <p>This is text</p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p></p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p></p>
  </div>

  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <p>Simple text</p>
  </div>
  <div class="table_content">
    <input type="submit" class="log_button_replace" value="Simple button">
  </div>
</div>

0 commentaires

1
votes

Vous pouvez ajouter un élément supplémentaire p code> dans .table_content code> qui ne sera visible que sur les petits écrans. Ajoutez une requête de support qui sur des écrans plus petits, effectuera .table code> une grille de 1 colonne et .Table_column code> élément une grille de 2 colonnes.

ps strong> dans le snippet de code ci-dessous, j'ai supprimé des colonnes vides. p>

p>



<div class="table">
  <div class="table_unit">
    <p>This is text</p>
  </div>
  <div class="table_unit">
    <p>This is text</p>
  </div>
  <div class="table_unit">
    <p>This is text</p>
  </div>
  
  <div class="table_content">
    <div>
      <p>Simple text</p>
    </div>
  </div>
  <div class="table_content">
    <div>
      <p>Simple text</p>
    </div>
  </div>
  <div class="table_content">
    <div>
      <p>Simple text</p>
    </div>
  </div>
  <div class="table_content">
    <div>
      <p>Simple text</p>
    </div>
  </div>
  <div class="table_content">
    <div>
      <p>Simple text</p>
    </div>
  </div>
  <div class="table_content">
    <div>
      <input type="submit" class="log_button_replace" value="Simple button">
    </div>
  </div>
</div>

0 commentaires

0
votes

Il vous suffit de créer 3 fichiers CSS, chacun pour une taille d'écran

Ajoutez ensuite le code suivant à la page HTML dans la page HTML dans la page P>

<link rel="stylesheet" media="screen and (min-width: 1280px)" href="css/widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 900px)" href="css/middlescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="css/smallscreen.css">

0 commentaires