Topic: Equal Height Columns whit Table
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
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
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.
<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> </td>
<td class="font-weight-bold text-wrap">Fermeture </td>
</tr>
<tr>
<td>02/12/2019</td>
<td> </td>
<td>01/04/2020</td>
</tr>
<tr>
<td> </td>
<td class="font-weight-bold text-wrap">Forfaits</td>
<td> </td>
</tr>
<tr>
<td>Journée: 00,00€</td>
<td> </td>
<td>Enfants: 00,00€</td>
</tr>
<tr>
<td>1/2 Journée: 00,00€</td>
<td> </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> </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> </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
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
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> </td>
<td class="font-weight-bold text-wrap">Fermeture </td>
</tr>
<tr>
<td>02/12/2019</td>
<td> </td>
<td>01/04/2020</td>
</tr>
<tr>
<td> </td>
<td class="font-weight-bold text-wrap">Forfaits</td>
<td> </td>
</tr>
<tr>
<td>Journée: 00,00€</td>
<td> </td>
<td>Enfants: 00,00€</td>
</tr>
<tr>
<td>1/2 Journée: 00,00€</td>
<td> </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 --->
Hello Marta,
Thanks for your help, you're great
Alain
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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