La balise meta viewport indique au navigateur comment mettre à l’échelle et afficher le contenu de votre page Web en fonction de la taille de l’écran de l’appareil. En ajoutant cette balise au <tête> de votre document HTML, vous pouvez vous assurer que vos tableaux ne déborderont pas ou ne rétréciront pas trop sur des écrans plus petits ou plus grands. Par exemple, vous pouvez utiliser la balise suivante pour définir l’échelle initiale sur 1 et la largeur sur la largeur du périphérique :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Les requêtes multimédias sont une fonctionnalité CSS puissante qui vous permet d’appliquer différents styles à vos éléments en fonction de certaines conditions, telles que la taille de l’écran, l’orientation ou la résolution. Vous pouvez utiliser des requêtes de média pour ajuster la mise en page, la taille de la police, le remplissage ou la visibilité de vos tableaux en fonction de la taille de l’écran. Par exemple, vous pouvez utiliser la requête multimédia suivante pour réduire la taille de police et le remplissage de vos cellules de tableau sur des écrans inférieurs à 600 pixels :
@media screen and (max-width: 600px) {
table, th, td {
font-size: 12px;
padding: 5px;
}
}
Many mobile devices are wider than 600px these days. Using "@media (orientation: portrait)" has been more reliable for me, but I am sure there is a better solution still.
Une autre façon de rendre vos tableaux plus réactifs et adaptables consiste à utiliser des unités relatives pour vos propriétés de largeur, de hauteur et de marge, au lieu d’unités absolues telles que les pixels ou les points. Les unités relatives, telles que les pourcentages, ems ou rems, sont basées respectivement sur la taille de l’élément parent, la taille de la police ou la taille de l’élément racine. De cette façon, vos tableaux peuvent être redimensionnés et ajustés en fonction de l’espace disponible et des préférences de l’utilisateur. Par exemple, vous pouvez utiliser la règle CSS suivante pour définir la largeur de votre table sur 80 % de la largeur de son élément parent :
table {
width: 80%;
}
Utilize relative units like percentages, ems, and rems for responsive HTML tables. Set table width as a percentage for scalability. Use ems for padding and text size based on parent font-size; rems for consistent sizing. For layout flexibility, try modern units like fr in CSS Grids. Combine with responsive font sizes (e.g., 3vw) for readability across devices. This ensures tables adapt well to various screens and content sizes. It's essential to test on different devices to ensure optimal performance.
Parfois, vous pouvez avoir des tableaux qui contiennent trop de données ou de contenu pour tenir dans l’espace disponible, en particulier sur les petits écrans. Dans ce cas, vous pouvez utiliser la propriété Overflow pour contrôler la façon dont le contenu supplémentaire est géré. La propriété overflow peut prendre des valeurs telles que masqué, défilement, auto ou clip, qui masquent, ajoutent une barre de défilement, ajustent automatiquement ou découpent le contenu qui déborde de la zone de l’élément. Par exemple, vous pouvez utiliser la règle CSS suivante pour ajouter une barre de défilement horizontale à votre tableau si elle déborde de la largeur de son élément parent :
table {
overflow-x: scroll;
}
Une autre technique pour rendre vos tableaux plus réactifs et adaptables consiste à utiliser la propriété display pour modifier la façon dont vos éléments de tableau sont affichés sur différentes tailles d’écran. La propriété display peut prendre des valeurs telles que block, inline-block, flex, grid ou none, ce qui affectera la disposition, l’alignement et la visibilité des éléments de votre tableau. Par exemple, vous pouvez utiliser la règle CSS suivante pour masquer vos en-têtes de tableau sur des écrans de moins de 600 pixels et les afficher sous forme d’éléments de bloc sur des écrans plus grands :
@media screen and (max-width: 600px) {
th {
display: none;
}
}
@media screen and (min-width: 600px) {
th {
display: block;
}
}
Leverage the display property for responsive tables. Besides hiding elements, explore flexbox for rows that adapt and wrap content on smaller screens. Consider using CSS Grid for complex, flexible layouts. Also, can't forget content adaptation; show summarized data on small screens and detailed data on larger ones. The display property is a gateway to powerful layout strategies for top-notch tables on any device.
Enfin, si vous souhaitez gagner du temps et des efforts, vous pouvez utiliser des frameworks réactifs qui fournissent des solutions prêtes à l’emploi pour créer des tables réactives et adaptables. Les frameworks réactifs sont des bibliothèques de code CSS et JavaScript qui offrent des styles, des grilles, des composants et des utilitaires prédéfinis pour la création de pages Web réactives. Quelques exemples de frameworks réactifs populaires sont Bootstrap, Foundation et Materialize. Ces frameworks ont généralement des classes et des attributs que vous pouvez appliquer à vos éléments de table pour les rendre réactifs et adaptables. Par exemple, vous pouvez utiliser le code HTML suivant pour créer une table réactive avec Bootstrap :
<div class="table-responsive">
<table class="table">
<!-- Your table content here -->
</table>
</div>
I would also mention Tailwind CSS, as it's getting more popular and big players are using it. In this specific case, Tailwind CSS provides pseudo-classes directly used in the HTML acting as media queries. They can even be chained with others, e.g. for dark mode.
HTML tables are a real challenge to make responsive as the number of columns increase. A table with 3-4 columns and cell data that is relatively small may lend itself well to responsive design with media queries - but if you’re trying to make a 10 column table fit onto a screen with a width of 450px (or even twice that), you’ll need to consider allowing side-scrolling (which I know for tables can be a nuisance), or a framework/library that handles the responsiveness for you. PrimeNg (Angular) has a table component that is responsive out-of-the-box, changing your table into a scrollable set of cards that contain 1 row of data per card. It’s an ingenious way to make a table responsive and adaptable to smaller screens.
The responsive grid will add up to 12 horizontally for each line during desktop view. However, these same elements that added up to 12 from left to right now stack. Those on the left stack on top automatically when the screen is smaller than 768 pixels in width. Think about whatever is on the left will be on top within mobile view.