feat(table): ajoute support des tableaux
This commit is contained in:
parent
b6ad130f0f
commit
3a0801c8fe
3 changed files with 120 additions and 0 deletions
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in a new issue