Comment - Tableaux côte à côte
Apprenez à créer des tableaux côte à côte avec CSS.
Comment placer des tables côte à côte
Comment créer des tableaux côte à côte avec la float
propriété CSS :
Exemple
* {
box-sizing: border-box;
}
/* Create a two-column
layout */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
Comment créer des tableaux côte à côte avec la flex
propriété CSS :
Exemple
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
Remarque : Flexbox n'est pas pris en charge dans Internet Explorer 10 et les versions antérieures. C'est à vous de décider si vous souhaitez utiliser des flotteurs ou du flex. Cependant, si vous avez besoin de support pour IE10 et versions ultérieures, vous devez utiliser float.
Conseil : Pour en savoir plus sur le module de mise en page de la boîte flexible, lisez notre chapitre CSS Flexbox .
Ajouter de la réactivité
L'exemple ci-dessus n'aura pas l'air bien sur un appareil mobile, car deux colonnes occuperont trop d'espace sur la page. Pour créer un tableau réactif, qui devrait passer d'une mise en page à deux colonnes à une mise en page pleine largeur sur les appareils mobiles, ajoutez les requêtes multimédias suivantes :
Exemple
/* Responsive layout - makes the two columns stack on top of each other
instead of next to each other on screens that are smaller than 600 px */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Conseil : accédez à notre didacticiel sur les tableaux CSS pour en savoir plus sur la façon de styliser les tableaux.
Conseil : accédez à notre didacticiel CSS Float pour en savoir plus sur la propriété float.
Conseil : accédez à notre didacticiel CSS Flexbox pour en savoir plus sur la propriété flex.