From 3a0801c8feb6c6a200eb02eec9f8fe370c614453 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Sat, 5 Oct 2024 18:02:54 +0200
Subject: [PATCH] feat(table): ajoute support des tableaux

---
 CHANGELOG.md         |  1 +
 exemples/exemples.md | 63 ++++++++++++++++++++++++++++++++++++++++++++
 scss/moineau.scss    | 56 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 120 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0bcca20..9959f68 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Balise `<details>`
   - Support des éléments de formulaires
   - Support des hgroups
+  - Support des tableaux
 - Ajout de classes utilitaires
   - `.flex` afin d'aligner simplement horizontalement des éléments
 - Ajout d'une navbar
diff --git a/exemples/exemples.md b/exemples/exemples.md
index a28652a..d0f8be6 100644
--- a/exemples/exemples.md
+++ b/exemples/exemples.md
@@ -23,6 +23,68 @@ Une image dans un paragraphe seul sera automatiquement en bloc, centrée et resp
 
 ![Une photo de chat, bien sûr](/cat.jpg)
 
+# Table
+
+Le style des tableaux
+
+<div class="responsive-table">
+    <table>
+    <caption>
+        Exemple de tableau
+    </caption>
+    <thead>
+        <tr>
+            <th scope="col">Animal</th>
+            <th scope="col">En liberté</th>
+            <th scope="col">Nombre</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <th scope="row">Canard</th>
+            <td>Oui</td>
+            <td>3</td>
+        </tr>
+        <tr>
+            <th scope="row">Poules</th>
+            <td>Non</td>
+            <td>4</td>
+        </tr>
+        <tr>
+            <th scope="row">Oies</th>
+            <td>Plus ou moins</td>
+            <td>6</td>
+        </tr>
+        <tr>
+            <th scope="row">Chiens</th>
+            <td>Oui</td>
+            <td>2</td>
+        </tr>
+        <tr>
+            <th scope="row">Chats</th>
+            <td>Oui</td>
+            <td>5</td>
+        </tr>
+        <tr>
+            <th scope="row">Perroquet (gris du gabon et deux verts)</th>
+            <td>Non</td>
+            <td>3</td>
+        </tr>
+        <tr>
+            <th scope="row">Iguane</th>
+            <td>Non</td>
+            <td>1</td>
+        </tr>
+    </tbody>
+    <tfoot>
+        <tr>
+            <th scope="row" colspan="2">Nombre total</th>
+            <td>24</td>
+        </tr>
+    </tfoot>
+    </table>
+</div>
+
 ## Classes utilitaires
 
 Quelques classes CSS sont utilisées afin d'avoir quelques outils supplémentaires utiles, notamment dans le cadre des flexboxes.
@@ -30,6 +92,7 @@ Quelques classes CSS sont utilisées afin d'avoir quelques outils supplémentair
 - `.flex` est utilisé pour afficher deux éléments cotes à cotes
 - `.toolbar-end` est utilsié pour afficher un élément à la fin d'une navbar (cela poussera tout les composants après). Il est utilisé par exemple dans le bouton "Source" de la navbar.
 - `.p` est utlisé pour se faire comporter une balise comme un paragraphe, se combine bien avec .flex dans les articles
+- `.responsive-table` est utilisé dans un dev pour entourer un tableau et le rendre plus ou moins responsive
 
 ## Artictecture des titres
 
diff --git a/scss/moineau.scss b/scss/moineau.scss
index 9c12611..d4c509d 100644
--- a/scss/moineau.scss
+++ b/scss/moineau.scss
@@ -208,6 +208,10 @@ pre code {
   padding: 0;
 }
 
+pre {
+  overflow: scroll;
+}
+
 summary {
   font-weight: 700;
   font-size: 0.9em;
@@ -242,6 +246,9 @@ input, textarea, select {
   &:hover {
     background-color: var(--hover-color);
   }
+
+  max-width: 100%;
+  overflow: scroll;
 }
 
 label {
@@ -301,6 +308,55 @@ button, .button, input[type=submit], input[type=reset], input[type=button] {
   }
 }
 
+/* Tables */
+
+.responsive-table {
+  width:100%;
+  overflow: scroll;
+}
+
+table {
+  border-collapse: separate;
+  width:100%;
+  border:0;
+  border-spacing: 3px;
+}
+
+caption {
+  font-weight: bolder;
+}
+
+table.centered th, table.centered td {
+  text-align: center;
+}
+
+tr, th, td {
+  border:0;
+}
+
+th, td {
+  background-color: var(--well-color);
+  padding:.33rem .66rem;
+}
+
+table:not(:has(thead)) tr:first-child, table > tr:first-child, table thead tr:first-child {
+  td:first-child, th:first-child {
+    border-top-left-radius: var(--border-radius);
+  }
+  td:last-child, th:last-child {
+    border-top-right-radius: var(--border-radius);
+  }
+}
+
+table > tr:last-child, table tbody tr:last-child {
+  td:first-child, th:first-child {
+    border-bottom-left-radius: var(--border-radius);
+  }
+  td:last-child, th:last-child {
+    border-bottom-right-radius: var(--border-radius);
+  }
+}
+
 /* ------------------ SPECIAL STYLING ------------------- */
 
 .flex {