From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../conflicting/web/css/border-collapse/index.html | 201 +++++++++++++++++++++ 1 file changed, 201 insertions(+) create mode 100644 files/fr/conflicting/web/css/border-collapse/index.html (limited to 'files/fr/conflicting/web/css/border-collapse') diff --git a/files/fr/conflicting/web/css/border-collapse/index.html b/files/fr/conflicting/web/css/border-collapse/index.html new file mode 100644 index 0000000000..3a1430f65e --- /dev/null +++ b/files/fr/conflicting/web/css/border-collapse/index.html @@ -0,0 +1,201 @@ +--- +title: Tableaux +slug: Astuces_CSS/Tableaux +tags: + - CSS +translation_of: Web/CSS/border-collapse +translation_of_original: Useful_CSS_tips/Tables +--- +

Centrage

+

Si vous voulez centrer un tableau, il n'est pas correct d'utiliser

+
+
+ text-align: center
+
+

dans l'élément parent. La méthode correcte est d'appliquer le style

+
+
+ margin: 0px auto 0px auto
+
+

à la table elle-même.

+ + + + + + + + + + + + + + + + + + + + + +
Table avec margin: 0px auto 0px auto;
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
+

Bordures

+

Voici un tableau standard avec cellspacing non nul et une bordure de cellule de 1px :

+ + + + + + + + + + + + + + + + + + + + + +
Table avec cellspacing="4"
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
+

Si vous voulez transformer le tableau en grille, définissez l'espacement de cellule à 0 et le tableau devient comme ceci :

+ + + + + + + + + + + + + + + + + + + + + +
Table avec cellspacing="0"
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
+

Le résultat n'est pas celui attendu et la raison en est que le modèle de bordure par défaut est défini comme séparé. Avec ce modèle, chaque cellule à sa propre bordure, même si l'espacement de cellule est 0. Afin d'avoir un rendu comme une grille, le modèle collapse doit être utilisé.

+ + + + + + + + + + + + + + + + + + + + + +
Table avec cellspacing="0"
+ et border-collapse:collapse;
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
Contenu celluleContenu celluleContenu cellule
+

Style de colonne

+

Si vous voulez définir un style particulier à certaines colonnes du tableau, la solution usuelle est de créer une classe de style et d'assigner explicitement toutes les cellules appartenant à ces colonnes à cette classe.

+
 <style type="text/css">
+   td { background-color: #eeeeee; }
+   td.CoulNoire { background-color: #cccccc; }
+ </style>
+
+<table>
+ <tr><td class="darkcol">Cell</td>
+    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
+  <tr><td class="darkcol">Cell</td>
+    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
+  <tr><td class="darkcol">Cell</td>
+    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
+  <tr><td class="darkcol">Cell</td>
+    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
+  <tr><td class="darkcol">Cell</td>
+    <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr>
+ </table>
+
+

Cette solution a l'avantage d'être compatible multi-navigateur, mais nécessite aussi de modifier le code HTML, pour explicitement sélectionner les cellules du tableau à styler.

+

Pour les navigateurs supportant les sélecteurs adjacents, il existe une solution alternative en pure CSS

+
<style type="text/css">
+    /* Style pour toutes les lignes */
+  tr { font: bold 16px Arial; }
+    /* Style pour les lignes avec une ligne avant: 2e, 3e, 4e, ... */
+  tr + tr { font: 12px Arial; }
+
+    /* Style pour toutes les colonnes */
+  td { background-color: #cccccc; }
+    /* Style pour les colonnes avec une colonne avant: 2e, 3e, 4e, 5e */
+  td + td { background-color: #eeeeee; }
+    /* Style pour les colonnes avec 4 colonnes avant: 5e */
+  td + td + td + td + td { background-color: #cccccc; }
+</style>
+
+<table>
+  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
+  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
+  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
+  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
+  <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr>
+</table>
+
+

En-tête fixe

+

Si un tableau contient de nombreuses lignes, quand l'utilisateur fait défiler la page vers le bas pour voir toutes les données, l'en-tête défile en haut et devient invisible. Vous pouvez avoir un tableau avec un en-tête fixe et un défilement vertical, en utilisant le code ci-après.

+
+ Ce code ne fait pas partie de la page originale et a été rajouté par le traducteur
+
<style type="text/css">
+table {
+	width: 20em;                    /* esthétique */
+	border-collapse: separate;      /* par défaut */
+/*  border-collapse: collapse;          /* Boggué depuis 2002 avec overflow-y: auto sur tbody */
+	border-spacing: 0;              /* contournement du bug */
+}
+tbody {
+	height: 10em;                   /* définit une hauteur */
+	overflow-x: hidden;             /* esthétique */
+	overflow-y: auto;               /* permet de scroller les cellules */
+}
+td {
+	border-left: 1px solid blue;    /* contournement du bug */
+	border-bottom: 1px solid blue;  /* contournement du bug */
+}
+</style>
+
+<table>
+  <thead><tr><th>Entête</th><th>Entête</th><th>Entête</th></tr></thead>
+  <tfoot><tr><th>Pied</th><th>Pied</th><th>Pied</th></tr></tfoot>
+  <tbody>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+    <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr>
+  </tbody>
+</table>
+
+

Actuellement, il y a un problème avec le moteur de rendu de Firefox (voir sur bugzilla {{ Bug(135236) }})), qui ne style pas corectement des tableaux avec le modèle collapse border et TBODY avec le style overflow: auto.

+

{{ languages( { "en": "en/Useful_CSS_tips/Tables" } ) }}

-- cgit v1.2.3-54-g00ecf