OUJOOD.COM
Tutoriel sur la propriété CSS table-layout
La propriété CSS table-layout est utilisée pour spécifier l'algorithme de rendu utilisé pour afficher le contenu d'un élément <table>.
Définition de la propriété table-layout
La propriété table-layout détermine comment la largeur des cellules d'une table est calculée. Elle a deux valeurs possibles :
- auto: la largeur des cellules est basée sur leur contenu. Cette valeur est le comportement par défaut.
- fixed: la largeur des cellules est basée sur la largeur des colonnes et non sur le contenu. Cela peut améliorer les performances d'affichage de grandes tables.
Syntaxe générale de la propriété table-layout
La syntaxe générale de la propriété table-layout est la suivante :
table-layout: value;
| Valeurs par défaut | auto |
|---|---|
| Inherited: | non |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS2 |
| Syntaxe JavaScript: | object.style.tableLayout="fixed" |
Valeurs possibles de la propriété table-layout
Les valeurs possibles pour la propriété table-layout sont :
- auto: la largeur des cellules est basée sur leur contenu.
- fixed: la largeur des cellules est basée sur la largeur des colonnes.
Exemples pratiques d'utilisation de la propriété table-layout
Voici quelques exemples d'utilisation de la propriété table-layout :
Exemple 1 : Utilisation de "auto"
<table style="table-layout: auto;">
<tr>
<td>Contenu de la cellule</td>
<td>Contenu de la cellule</td>
</tr>
</table>
Exemple 2 : Utilisation de "fixed"
<table style="table-layout: fixed;">
<tr>
<td>Contenu de la cellule</td>
<td>Contenu de la cellule</td>
</tr>
</table>
Exemple 3 : JavaScript pour basculer entre les styles
Dans cet exemple le code est un exemple d'utilisation de la propriété CSS table-layout et d'un script JavaScript pour basculer entre les styles de disposition de tableau. Voici une explication étape par étape du code fourni :
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tutoriel sur la propriété css tab-layout </title>
<style>
body {
padding: 14px;
text-align: center;
}
table {
width: 100%;
margin: 20px auto;
table-layout: auto;
}
.fixed {
table-layout: fixed;
}
table,
td,
th {
border-collapse: collapse;
}
th,
td {
padding: 10px;
border: solid 1px;
text-align: center;
}
</style>
</head>
<body>
<h2>Utilisation de la propriété table-layout</h2>
<table id="t">
<thead>
<tr>
<th>Exemple de texte</th>
<th>Exemple de texte</th>
<th>Exemple de texte</th>
<th>Exemple de texte</th>
</tr>
</thead>
<tbody>
<tr>
<td>Un contenu beaucoup plus long à des fins de démonstration. Plus d'informations ici. </td>
<td>Exemple de texte</td>
<td>Exemple de texte</td>
<td>Exemple de texte</td>
</tr>
<tr>
<td>Exemple de texte</td>
<td>Exemple de texte</td>
<td>Exemple de texte</td>
<td>Exemple de texte</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Exemple de texte</td>
<td>Exemple de texte</td>
<td>Exemple de texte</td>
<td>Exemple de texte</td>
</tr>
</tfoot>
</table>
<button class="tl"><b>Toggle table-layout: fixed</b></button>
<script>
var tlBtn = document.querySelector('.tl'),
tbl = document.getElementById('t');
tlBtn.addEventListener('click', function() {
tbl.classList.toggle('fixed');
}, false);
</script>
</body></html>
Lorsque le bouton est cliqué, la méthode classList.toggle('fixed') est utilisée pour ajouter ou supprimer la classe CSS "fixed" du tableau, ce qui modifie le style de disposition du tableau.
Ce code crée un tableau avec du contenu et un bouton pour basculer entre deux styles de disposition du tableau en utilisant la propriété table-layout et du JavaScript pour ajouter ou supprimer une classe CSS sur le tableau.
Astuces et conseils d'utilisation de la propriété table-layout
Voici quelques astuces et conseils utiles lors de l'utilisation de la propriété table-layout:
- Utilisez la valeur fixed pour les grandes tables afin d'améliorer les performances d'affichage.
- Spécifiez des largeurs de colonnes appropriées lorsque vous utilisez table-layout: fixed.
- Si la largeur d'une cellule est supérieure à la largeur de la colonne, le contenu sera tronqué.
- La propriété table-layout est bien supportée par la plupart des navigateurs modernes.
En utilisant la propriété table-layout, vous pouvez contrôler la façon dont les tables sont affichées dans vos pages web, en ajustant la largeur des cellules en fonction de vos besoins.
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.
Les numéros suivis de -webkit- indiquent la première version qui fonctionne avec un préfixe.
| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 14 | 5 | 1 | 1 | 7 |