1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Equal Height Columns whit Table

LAGIER priority asked 4 years ago

Comportement attendu

Comportement réel Bonjour le support MDB,

J'aurai besoin de votre aide pour une mise en page avec des grilles égales contenant un avec d-flex et sans d-flex.

2 grilles avec une table ayant le même nombre de lignes se comportent bien et restent de même largeur.

Mais si la table n'a pas le même nombre de lignes, les 2 grilles sont plus étroites et sont décalées des grilles qui ont une table avec le même nombre de lignes.

Pour cela j'ai créé une page témoin à voir ici, pour voir le problème.

https://haute-savoie.ialpes.com/Templates/HomePage-v-4-SUPPORT.html

Sous GRID A- les 2 blocs sont créés comme "". Tous les styles sont inclus dans la page pour plus de compréhension, sauf Bootstrap v4.4.1 et mdb.min.css: Material Design for Bootstrap 4 * Version: MDB PRO 4.14.0

Merci pour votre aide et bonne journée.

Alain

Ressources (captures d'écran, extraits de code, etc.) .dropdown> .dropdown-menu {top: 200%; transition: 0,3 s tous avec facilité; } .dropdown: survoler> .dropdown-menu {display: block; Top 100%; }

.dropdown> .dropdown-toggle: actif {/ Sans cela, cliquer le rendra collant / pointeur-événements: aucun; }

.flex-1 {flex: 1; }

table.table-hover tbody tr td: hover {background-color: # fb9692; largeur: 100%; } / * Uniquement pour l'extrait de code / .double-nav .breadcrumb-dn {color: #fff; } / Retour en haut * /

TopUp {affichage: aucun; position: fixe; bas: 20 pixels; droite: 30 pixels; index z: 99; taille de police: 18 pixels; bordure: 0; contour: 0; couleur d'arrière-plan: rouge; couleur: blanc; curseur: pointeur; remplissage: 15 pixels; rayon de bordure: 4 pixels}

entrez la description du lien ici

LAGIER priority answered 4 years ago

Hello Marta,

Thanks for your help, you're great

Alain

Marta Wierzbicka staff commented 4 years ago

Hi,

you're welcome.

Best, Marta

Marta Wierzbicka staff answered 4 years ago

Hi,

I copied your grid into the snippet here: https://mdbootstrap.com/snippets/jquery/marta-szymanska/1876370 and add some classes that fix your code I think. Check it out.

Best, Marta

LAGIER priority answered 4 years ago

Hello Marta, Thank you for the time you will give me to solve my problem with these grids with a table.

To better understand I went back to the MDB-Magazine-Templates-Pack_4.8.11 model.

The CSS versions of Bootstrap and mdb.min, are those of MDB-Pro_4.14.0, installed in the ccs folder of the site.

There are 3 Section. 1. Section 1, MODEL MDB 2. Section 2, GREEN background.

, the width remains equal depending on, but the 2 grids are not the same height 3. Section 3, RED background. . The height is equal, but the width does not correspond according to the size of the screen with the grids of section 1 Sections 2 and 3 have a table with uneven row and column.    - If I don't use d-flex there is a height problem    - If I use d-flex, there is a problem of width depending on the size between pc, tablet, smartphone To have the 2 grids of the same height I place temporarily between and .flex-1 { flex: 1; } I then add to the DIV the following code "d-flex align-items-stretch", to have the same height on the 2 grids. Encountered problem : In the green ROW background, , the grids keep the same width, but not the same height. In the red ROW background, , the grids keep the same height, but the width is no longer like the MDB model in Section 1. I would like the blocks to work like the MDB model in section 1 It would be my pleasure to accept your solutions so that the blocks keep the same width and height depending on the screen used. Good day to you. [enter link description here][1] Section 2 - Height problem without d-flex HERE Table 5 rows, 3 columns Ouverture   Fermeture 02/12/2019   01/04/2020   Forfaits   Journée: 00,00€   Enfants: 00,00€ 1/2 Journée: 00,00€   Sénior: 00,00€ Table 3 rows, 2 columns 2000 m. 1500 m. 1000 m. 
          <!-- Grid row --->

        </section>
          <!--/ SECTION 2  --->




      <!-- SECTION 3  --->

Section 3 - Width problem wit d-flex HERE 

          <hr class="red title-hr">
          <!-- Grid row --->
          <div class="row mb-4" style="background-color:#C36">



<!--col-6 d-flex align-items-strech  -->
<div class="col-6 d-flex align-items-stretch">

    <div class="card">
        <div class="card-header text-white" style="background-color:#5C6DA3"><img src="../img/icones/icone_altitude_bg.jpg" alt="icone montagne" width="38" height="38">Table 5 rows, 3 columns</div>

        <!-- card-body  -->

        <div class="card-body">
            <!-- TABLE GRID A -->
            <table class="text-center" style="width:100%">
                <tr class="text-capitalize indigo-text">
                    <td class="font-weight-bold text-wrap">Ouverture </td>
                    <td>&nbsp;</td>
                    <td class="font-weight-bold text-wrap">Fermeture </td>

                </tr>
                <tr>
                    <td>02/12/2019</td>
                    <td>&nbsp;</td>
                    <td>01/04/2020</td>

                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="font-weight-bold text-wrap">Forfaits</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Journée: 00,00€</td>
                    <td>&nbsp;</td>
                    <td>Enfants: 00,00€</td>
                </tr>
                <tr>
                    <td>1/2 Journée: 00,00€</td>
                    <td>&nbsp;</td>
                    <td>Sénior: 00,00€</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<!-- /col-6 d-flex align-items-strech  -->


<!--col-6 d-flex align-items-strech  -->

Table 3 rows, 2 columns

        <div class="card-body">
            <table>
                <tr>
                    <th rowspan="3" scope="row"><img class="img-fluid" src="../img/icones/altitude-250.jpg" width="250" height="223" alt="altitude"></th>
                    <td>2000 m.</td>
                </tr>
                <tr>
                    <td>1500 m.</td>
                </tr>
                <tr>
                    <td>1000 m.</td>
                </tr>
            </table>

        </div>
    </div>
</div>
<!--/ col-6 d-flex align-items-strech  -->


        </section>
      <!--/ SECTION 3  --->

Marta Wierzbicka staff answered 4 years ago

Hi,

on your website, you have a lot of columns: https://haute-savoie.ialpes.com/Templates/HomePage-v-4-SUPPORT.html. Tell me, with which one you need help? I'm a bit confused about your code. Also, it would be very helpful for me to help you if you paste the code above to the snippet here: https://mdbootstrap.com/snippets/. Paste the exact code in which you need help to the snippet and describe the problem in a concise and understandable way. And I'll try to help you.

Best, Marta

LAGIER priority answered 4 years ago

Hello Marta and for this error on my part.

I will need your precious help for a layout in a with 2 grids of equal height each containing a table.

The problem is that these 2 grids with a "table" do not have the same number of lines, and when we change between the size of the display (800x600, 1024x768, 1280x800, 1366x768, etc.) on the browser (chrome or Firefox ), the columns do not line up with the contents of the . To keep the height equal I used on the d-flex div and the css style: .flex-1 {flex: 1; } :

If the same grids with a table have the same number of rows and without "d-flex align-items-stretch" on the , the latter keeps the correct width and aligns with the content of the .

For this I created a witness page to see the problem. A “ROW” with: GRID A WITH Equal height columns within a card, with a green background and A “ROW” GRID B - WITHOUT Equal height columns within a card, with a pink background.

We can see below a block of 3 div without d-flex which react well each with a table with the same number of rows and columns.

As the code is long, I give you some information: I have placed personal styles on the page for your convenience.

 The other styles are linked to the css folder, and are the official MDB styles of the latest version.

enter link description here

<div class="col-xl-8 col-lg-8 col-md-12">

     <section> 

     <h5 class="dark-grey-text font-weight-bold"> <strong>GRID A WITH Equal height columns within a card</strong> </h5>

      <hr> 


<!--col d-flex align-items-strech  -->
<div id="domaine" class="col d-flex align-items-stretch">

    <div class="card">
        <div class="card-header text-white" style="background-color:#5C6DA3"><img src="../img/icones/icone_altitude_bg.jpg" alt="icone montagne" width="38" height="38"> Saison 2019/202</div>

        <!-- card-body  -->

        <div class="card-body">
            <!-- TABLE GRID A -->
            <table class="text-center" style="width:100%">
                <tr class="text-capitalize indigo-text">
                    <td class="font-weight-bold text-wrap">Ouverture </td>
                    <td>&nbsp;</td>
                    <td class="font-weight-bold text-wrap">Fermeture </td>

                </tr>
                <tr>
                    <td>02/12/2019</td>
                    <td>&nbsp;</td>
                    <td>01/04/2020</td>

                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="font-weight-bold text-wrap">Forfaits</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Journée: 00,00€</td>
                    <td>&nbsp;</td>
                    <td>Enfants: 00,00€</td>
                </tr>
                <tr>
                    <td>1/2 Journée: 00,00€</td>
                    <td>&nbsp;</td>
                    <td>Sénior: 00,00€</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<!-- /col d-flex align-items-strech  -->

<div class="col d-flex align-items-stretch">
    <div class="card">
        <div class="card-header text-white" style="background-color:#5C6DA3"><img src="../img/icones/icone_altitude_bg.jpg" alt="icone montagne" width="38" height="38"> Altitude
        </div>

        <div class="card-body">
            <table>
                <tr>
                    <th rowspan="3" scope="row"><img class="img-fluid" src="../img/icones/altitude-250.jpg" width="250" height="223" alt="altitude"></th>
                    <td>2000 m.</td>
                </tr>
                <tr>
                    <td>1500 m.</td>
                </tr>
                <tr>
                    <td>1000 m.</td>
                </tr>
            </table>

        </div>
    </div>
</div>

GRID B - WITHOUT Equal height columns within a card

Remontées 
  <div class="card-body">
    <table> <tbody><tr> <th scope="row"><img class="pr-1" src="../img/icones/icone_metro_alpin.jpg" alt="Snowpark"></th> <td>Métro alpin </td>
      <td>0</td>
    </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_telepheriques.jpg" alt="Téléphérique"></th> <td>Téléphérique </td>
        <td>2</td>
      </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_telecabine.jpg" alt="Télécabine"></th> <td>Télécabine </td>
        <td>5</td>
      </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_telesiege.jpg" alt="Télésiège"></th> <td>Télésiège </td>
        <td>22</td>
      </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_teleski.jpg" alt="Téléski"></th> <td>Téléski </td>
        <td>12</td>
      </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_telebaby.jpg" alt="Télébaby"></th> <td>Baby </td>
        <td>3</td>
      </tr>
      <tr>
        <th scope="row"><img src="../img/icones/icone_heliski.jpg" alt="Héléski"></th>
        <td>Héliski</td>
        <td>&nbsp;</td>
      </tr> 
      </tbody></table>


  </div>
</div>

Domaine 

  <div class="card-body">
    <table> <tbody><tr> <th scope="row"><img class="pr-1" src="../img/icones/icone_ski_nocturne.jpg" alt="Snowpark"></th> 
    <td>Pistes noires </td>
      <td><span class="badge badge-dark">5</span></td>
    </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_ski_nocturne.jpg" alt="Téléphérique"></th> 
      <td>Pistes rouges </td>
        <td><span class="badge badge-danger">5</span></td>
      </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_telecabine.jpg" alt="Télécabine"></th> <td>Pistes bleues </td>
         <td><span class="badge badge-info">5</span></td>
      </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_telesiege.jpg" alt="Télésiège"></th> <td>Pistes vertes </td>
        <td><span class="badge badge-success">5</span></td>
      </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_ski_de_fond.jpg" alt="Téléski"></th> 
      <td>Pistes noires</td>
        <td><span class="badge badge-info">5</span></td>
      </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_ski_de_fond.jpg" alt="Télébaby"></th> 
      <td>Pistes rouges</td>
        <td><span class="badge badge-danger">5</span></td>
      </tr>
      <tr>
        <th scope="row"><img src="../img/icones/icone_ski_de_fond.jpg" alt="Héléski"></th>
        <td>Pistes vertes</td>
        <td><span class="badge badge-success">5</span></td>
      </tr> 
      </tbody></table>
  </div>
</div>

Activités 

 <table> <tbody><tr> <th scope="row"><img class="pr-1" src="../img/icones/icone_snowboard.jpg" alt="Snowpark"></th> <td>Snowpark</td>
      <td><i class="fas fa-check pl-2 green-text" aria-hidden="true"></i></td>
    </tr> 
      <tr> <th scope="row"><img class="pr-1" src="../img/icones/icone_ski_de_fond.jpg" alt="Pistes ski de fond, nordique"></th> <td>Ski nordique</td>
        <td><i class="fas fa-check pl-2 green-text" aria-hidden="true"></i></td>
      </tr> 
      <tr> <th scope="row"><img class="pr-1" src="../img/icones/icone_ski_nocturne.jpg" alt="Ski nocturne"></th> <td>Ski nocturne</td>
        <td><i class="fas fa-check pl-2 green-text" aria-hidden="true"></i></td>
      </tr> 
      <tr> <th scope="row"><img class="pr-1" src="../img/icones/icone_raquette.jpg" alt="Sentier raquette"></th> <td>Sentier raquette</td>
        <td><i class="fas fa-check pl-2 green-text" aria-hidden="true"></i></td>
      </tr>
      <tr> <th scope="row"><img class="pr-1" src="../img/icones/icone_luge.jpg" alt="Piste de luge"></th> <td>Piste de luge</td>
        <td><i class="fas fa-check pl-2 green-text" aria-hidden="true"></i></td>
      </tr> 
      <tr> <th scope="row"><img class="pr-1" src="../img/icones/icone_patinoire.jpg" alt="Patinoire"></th> <td>Patinoire</td>
        <td><i class="fas fa-check pl-2 green-text" aria-hidden="true"></i></td>
      </tr> 
      <tr> <th scope="row"><img class="pr-1" src="../img/icones/icone_promeneur.jpg" alt="Sentier promeneur"></th> <td>Promeneur  </td>
        <td><i class="fas fa-check pl-2 green-text" aria-hidden="true"></i></td>
      </tr> 
      </tbody></table>
     </div> </div> </div>

Activités Salle de sport Escalade Tennis Handiski Traineau Musher Parapente 

      </tbody></table>

Loisirs
Piscine Bien-être Cinéma Dancing Médiathèque Musée Jeux enfant 

<div class="card">
<div class="card-header text-white" style="background-color:#5C6DA3"><img src="../img/icones/icone_altitude_bg.jpg" alt="icone montagne" width="38" height="38">

Remontées 

  <div class="card-body">
    <table> <tbody><tr> <th scope="row"><img class="pr-1" src="../img/icones/icone_metro_alpin.jpg" alt="Snowpark"></th> <td>Métro alpin </td>
      <td>0</td>
    </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_telepheriques.jpg" alt="Téléphérique"></th> <td>Téléphérique </td>
        <td>2</td>
      </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_telecabine.jpg" alt="Télécabine"></th> <td>Télécabine </td>
        <td>5</td>
      </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_telesiege.jpg" alt="Télésiège"></th> <td>Télésiège </td>
        <td>22</td>
      </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_teleski.jpg" alt="Téléski"></th> <td>Téléski </td>
        <td>12</td>
      </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_telebaby.jpg" alt="Télébaby"></th> <td>Baby </td>
        <td>3</td>
      </tr>
      <tr>
        <th scope="row"><img src="../img/icones/icone_heliski.jpg" alt="Héléski"></th>
        <td>Héliski</td>
        <td>&nbsp;</td>
      </tr> 
      </tbody></table>


  </div>
</div>

Infos 

  <div class="card-body">
    <table> <tbody><tr> <th scope="row"><img class="pr-1" src="../img/icones/icone_skipass.jpg" alt="Caisse forfait"></th> 
    <td>Caisse </td>
      <td>0450 ... ...</td>
    </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_secours.jpg" alt="Pisteur-secouriste de la station"></th> 
      <td>Secouriste </td>
        <td>0450 ... ...</td>
      </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_secours_montagne.jpg" alt="Secours en montagne"></th> 
      <td>Secours</td>
        <td>112</td>
      </tr>
      <tr> <th scope="row"><img src="../img/icones/icone_skishool.jpg" alt="Ecole de ski"></th> <td>Skishool </td>
        <td>0450 ... ...</td>
      </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_jardin_enfant.jpg" alt="Jardin d'enfant"></th> 
      <td>Baby Club</td>
        <td>0450 ... ...</td>
      </tr> 

      <tr> <th scope="row"><img src="../img/icones/icone_meteo.jpg" alt="Météo"></th> <td>Météo</td>
        <td>0450 ... ...</td>
      </tr> 
      <tr> <th scope="row"><img src="../img/icones/icone_meteo.jpg" alt="Météo"></th> <td>Météo</td>
        <td>0450 ... ...</td>
      </tr>
      </tbody></table>
  </div>
</div>

Thank you for your collaboration and help. Good day to you. Alain

Marta Wierzbicka staff answered 4 years ago

Hi,

would you describe your issue in English, please?

Best, Marta

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.14.0
  • Device: Table
  • Browser: Chrome, FF,
  • OS: Windows 10 64b
  • Provided sample code: No
  • Provided link: Yes
Tags
table colonnes-de-hauteur-gale
About author
LAGIER
224Support score
26Questions 31Answers 2Snippets