feat(table): ajoute support des tableaux

This commit is contained in:
Kazhnuz 2024-10-05 18:02:54 +02:00
parent b6ad130f0f
commit 3a0801c8fe
3 changed files with 120 additions and 0 deletions

View file

@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Balise `<details>` - Balise `<details>`
- Support des éléments de formulaires - Support des éléments de formulaires
- Support des hgroups - Support des hgroups
- Support des tableaux
- Ajout de classes utilitaires - Ajout de classes utilitaires
- `.flex` afin d'aligner simplement horizontalement des éléments - `.flex` afin d'aligner simplement horizontalement des éléments
- Ajout d'une navbar - Ajout d'une navbar

View file

@ -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) ![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 ## Classes utilitaires
Quelques classes CSS sont utilisées afin d'avoir quelques outils supplémentaires utiles, notamment dans le cadre des flexboxes. 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 - `.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. - `.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 - `.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 ## Artictecture des titres

View file

@ -208,6 +208,10 @@ pre code {
padding: 0; padding: 0;
} }
pre {
overflow: scroll;
}
summary { summary {
font-weight: 700; font-weight: 700;
font-size: 0.9em; font-size: 0.9em;
@ -242,6 +246,9 @@ input, textarea, select {
&:hover { &:hover {
background-color: var(--hover-color); background-color: var(--hover-color);
} }
max-width: 100%;
overflow: scroll;
} }
label { 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 ------------------- */ /* ------------------ SPECIAL STYLING ------------------- */
.flex { .flex {