Sommaire
1
Le script
Utiliser un LLM pour résumer ou expliquer ce script
1
Le script
Ajouter le script sur la page ou le projet Webflow
<style>
/* Variables */
:root {
/* COULEURS DU TABLEAU */
--table-header-font-color: #ffffff; /* couleurs des en-têtes */
--table-header-bg-color: #2260c9; /* couleurs du backgound des en-têtes */
--table-header-border-color: #ffffff; /* couleurs des en-têtes */
--table-cell-font-color: #777777;
--table-cell-border-color: #d2d2d2;
--table-bg-color: #ffffff;
--table-border-color: #ffffff; /* couleurs des borders */
/* DIMENSIONS DU TABLEAU */
--table-header-padding-top-bottom: 12px; /* headers top & bottom padding */
--table-header-padding-left-right: 10px; /* headers left & right padding */
--table-heading-font-size: 18px;
--table-cell-padding-top-bottom: 10px; /* Top & bottom des cellules */
--table-cell-padding-left-right: 10px; /* Left & Right des cellules */
--table-cell-font-size: 14px;
--table-cell-min-width: 200px;
--table-margin-bottom: 48px;
}
/* Class */
.table-wrap {
overflow-x: scroll;
width: 100%;
margin-bottom: var(--table-margin-bottom);
}
table, th, td {
border-collapse: collapse;
}
table {
width: 100%;
border: 1px solid var(--table-border-color);
background-color: var(--table-bg-color);
}
th:last-child {
border-left: 1px solid var(--table-header-bg-color);
border-top: 1px solid var(--table-header-bg-color);
border-right: 1px solid var(--table-header-bg-color);
border-bottom: 1px solid var(--table-header-bg-color);
}
th {
text-align: left;
color: var(--table-header-font-color);
background-color: var(--table-header-bg-color);
padding: var(--table-header-padding-top-bottom) var(--table-header-padding-left-right);
font-size: 16px;
border-left: 1px solid var(--table-header-bg-color);
border-top: 1px solid var(--table-header-bg-color);
border-right: 1px solid var(--table-header-border-color);
border-bottom: 1px solid var(--table-header-bg-color);
font-size: var(--table-heading-font-size);
}
td {
color: var(--table-cell-font-color);
border: 1px solid var(--table-cell-border-color);
padding: var(--table-cell-padding-top-bottom) var(--table-cell-padding-left-right);
font-size: var(--table-cell-font-size);
}
th, td {
min-width: var(--table-cell-min-width);
}
</style><div class="table-wrap">
<table>
<!-- En tête des colonnes -->
<tr>
<th>Pays</th>
<th>Capitale</th>
<th>Nombre d'habitants</th>
</tr>
<!-- Ligne 1 -->
<tr>
<td>France</td>
<td>Paris</td>
<td>67 millions</td>
</tr>
<!-- Ligne 2 -->
<tr>
<td>Espagne</td>
<td>Madrid</td>
<td>48 millions</td>
</tr>
<!-- Ligne 3 -->
<tr>
<td>Allemagne</td>
<td>Berlin</td>
<td>75 millions</td>
</tr>
</table>
</div>2
Les attributes
Nom
Valeur
Nom
Valeur
Nom
Valeur
Nom
Valeur
Nom
Valeur
Nom
Valeur
Nom
Valeur
3
Tuto
4
Template
5
Code source du script
<style>
/* Variables */
:root {
/* COULEURS DU TABLEAU */
--table-header-font-color: #ffffff; /* couleurs des en-têtes */
--table-header-bg-color: #2260c9; /* couleurs du backgound des en-têtes */
--table-header-border-color: #ffffff; /* couleurs des en-têtes */
--table-cell-font-color: #777777;
--table-cell-border-color: #d2d2d2;
--table-bg-color: #ffffff;
--table-border-color: #ffffff; /* couleurs des borders */
/* DIMENSIONS DU TABLEAU */
--table-header-padding-top-bottom: 12px; /* headers top & bottom padding */
--table-header-padding-left-right: 10px; /* headers left & right padding */
--table-heading-font-size: 18px;
--table-cell-padding-top-bottom: 10px; /* Top & bottom des cellules */
--table-cell-padding-left-right: 10px; /* Left & Right des cellules */
--table-cell-font-size: 14px;
--table-cell-min-width: 200px;
--table-margin-bottom: 48px;
}
/* Class */
.table-wrap {
overflow-x: scroll;
width: 100%;
margin-bottom: var(--table-margin-bottom);
}
table, th, td {
border-collapse: collapse;
}
table {
width: 100%;
border: 1px solid var(--table-border-color);
background-color: var(--table-bg-color);
}
th:last-child {
border-left: 1px solid var(--table-header-bg-color);
border-top: 1px solid var(--table-header-bg-color);
border-right: 1px solid var(--table-header-bg-color);
border-bottom: 1px solid var(--table-header-bg-color);
}
th {
text-align: left;
color: var(--table-header-font-color);
background-color: var(--table-header-bg-color);
padding: var(--table-header-padding-top-bottom) var(--table-header-padding-left-right);
font-size: 16px;
border-left: 1px solid var(--table-header-bg-color);
border-top: 1px solid var(--table-header-bg-color);
border-right: 1px solid var(--table-header-border-color);
border-bottom: 1px solid var(--table-header-bg-color);
font-size: var(--table-heading-font-size);
}
td {
color: var(--table-cell-font-color);
border: 1px solid var(--table-cell-border-color);
padding: var(--table-cell-padding-top-bottom) var(--table-cell-padding-left-right);
font-size: var(--table-cell-font-size);
}
th, td {
min-width: var(--table-cell-min-width);
}
</style><div class="table-wrap">
<table>
<!-- En tête des colonnes -->
<tr>
<th>Pays</th>
<th>Capitale</th>
<th>Nombre d'habitants</th>
</tr>
<!-- Ligne 1 -->
<tr>
<td>France</td>
<td>Paris</td>
<td>67 millions</td>
</tr>
<!-- Ligne 2 -->
<tr>
<td>Espagne</td>
<td>Madrid</td>
<td>48 millions</td>
</tr>
<!-- Ligne 3 -->
<tr>
<td>Allemagne</td>
<td>Berlin</td>
<td>75 millions</td>
</tr>
</table>
</div>