3
votes

Créer une table avec une structure de base div pour mon projet réactif

Dans mon nouveau projet, j'utilise à la fois bootstrap et css et je crée un tableau réactif en utilisant la structure de base div. J'essaie cet exemple pour créer un tableau mais ma page est comme l'image ci-dessous: J'essaye de mettre en dessous la structure de l'image:

Le problème ne concerne que le tuple 1x3. `

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="table" style="border:1px solid black;">
   <div class="row">
       <div class="col-md-6">1</div>
       <div class="col-md-6">2</div>
   </div>
   <div class="row">
       <div class="col-md-4">1</div>
       <div class="col-md-4">2</div>
       <div class="col-md-4">3</div>
   </div>
   <div class="row">
       <div class="col-md-4">1</div>
       <div class="col-md-4">2</div>
       <div class="col-md-4">3</div>
   </div>
</div>

html css

1 commentaires

Si vous me donnez le lien correct pour étudier ce problème et j'essaierai d'en savoir plus à ce sujet. Parce que je ne connais pas beaucoup la conception de la page.

3 Réponses :

2
votes

Si je comprends bien votre question, les premières valeurs doivent être col-md-4 et col-md-8 , et non 6 et 6:

<div class=" table " style="border:1px solid black;">
    <div class="row ">
         <div class="col-md-4">
             1
         </div>
         <div class="col-md-8">
            2
         </div>
    </div>
    <div class="row ">
        <div class="col-md-4">
            1
        </div>
        <div class="col-md-4">
            2
        </div>
        <div class="col-md-4">
            3
        </div>
    </div>
    <div class="row ">
            <div class="col-md-4">
                1
            </div>
            <div class="col-md-4">
                2
            </div>
            <div class="col-md-4">
                3
            </div>
        </div>
</div>

0 commentaires

2
votes

En utilisant votre code, je corrige votre code. Remplacez le premier col-md-6 par col-md-4, puis le deuxième col-md-6 par col-md-8. Si après cela vous ne comprenez pas alors allez avec mon code.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<style>
 div{
    border: 1px solid black;
  }
  </style>

<div class=" table table-bordered"  >
    <div class="row " >
         <div class="col-md-4">
             1
         </div>
         <div class="col-md-8">
            2
         </div>
    </div>
    <div class="row ">
        <div class="col-md-4">
            1
        </div>
        <div class="col-md-4">
            2
        </div>
        <div class="col-md-4">
            3
        </div>
    </div>
    <div class="row ">
            <div class="col-md-4">
                1
            </div>
            <div class="col-md-4">
                2
            </div>
            <div class="col-md-4">
                3
            </div>
        </div>
</div>

voir mon extrait de code en plein écran de votre appareil.

0 commentaires

2
votes

Essayez ce qui suit

 <div class=" table " style="border:1px solid black;">
    <div class="row ">
         <div style="width:35%;float:left;border:1px solid black;">
             1
         </div>
         <div style="width:65%;float:left;border:1px solid black;">
            2
         </div>
    </div>
    <div class="row ">
         <div style="width:35%;float:left;border:1px solid black;">
            1
        </div>
         <div style="width:30%;float:left;border:1px solid black;">
            2
        </div>
         <div style="width:35%;float:left;border:1px solid black;">
            3
        </div>
    </div>
    <div class="row ">
         <div style="width:35%;float:left;border:1px solid black;">
            1
        </div>
         <div style="width:30%;float:left;border:1px solid black;">
            2
        </div>
         <div style="width:35%;float:left;border:1px solid black;">
            3
        </div>
    </div>
</div>

0 commentaires