.c-table--narrow
Tabelle con spaziatura ristretta.
| Beneficiario | Mario Rossi |
| IBAN beneficiario | IT A 03599 01800 000001234567 |
| Nazione | Italia |
| Provincia | TN |
Le tabelle in Inbank sono presenti in tutte le funzioni di consultazione all'interno di Inbank ma sono comuni anche in altri contesti. La componente è .c-table.
Stili default
| Beneficiario | Mario Rossi |
| IBAN beneficiario | IT A 03599 01800 000001234567 |
| Nazione | Italia |
| Provincia | TN |
Estensioni e modificatori
.c-table--narrow
Tabelle con spaziatura ristretta.
| Beneficiario | Mario Rossi |
| IBAN beneficiario | IT A 03599 01800 000001234567 |
| Nazione | Italia |
| Provincia | TN |
.c-table--negative
Tabelle con colore alternativo.
| Beneficiario | Mario Rossi |
| IBAN beneficiario | IT A 03599 01800 000001234567 |
| Nazione | Italia |
| Provincia | TN |
.c-table--bordered
Tabelle senza colori di sfondo ma con bordi che ne delimitano le righe e le celle.
| Beneficiario | Mario Rossi |
| IBAN beneficiario | IT A 03599 01800 000001234567 |
| Nazione | Italia |
| Provincia | TN |
.c-table--plain
Tabelle senza colori di sfondo e senza bordi.
| Beneficiario | Mario Rossi |
| IBAN beneficiario | IT A 03599 01800 000001234567 |
| Nazione | Italia |
| Provincia | TN |
.c-table--lined
La prima cella è sempre larga il 50% indipendentemente dal contenuto.
| Beneficiario | Mario Rossi |
| IBAN beneficiario | IT A 03599 01800 000001234567 |
| Nazione | Italia |
| Provincia | TN |
<table class="c-table [modifier class]">
<tr>
<td scope="row" class="u-strong">Beneficiario</td>
<td>Mario Rossi</td>
</tr>
<tr>
<td scope="row" class="u-strong"><abbr title="International Bank Account Number">IBAN</abbr> beneficiario</td>
<td>IT A 03599 01800 000001234567</td>
</tr>
<tr>
<td scope="row" class="u-strong">Nazione</td>
<td>Italia</td>
</tr>
<tr>
<td scope="row" class="u-strong">Provincia</td>
<td>TN</td>
</tr>
</table>La componente dispone di due estensioni figlie che permettono di contrassegnare le righe come lette o non lette, come succede nella funzione Messaggi: .c-table__read e .c-table__not-read.
Stili default
| Nome offerta | Nome Banca | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | |
| Nome offerta | Nome Banca | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. | |
| Nome offerta | Nome Banca | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
<table class="c-table">
<tr class="c-table__read">
<td scope="row" class="u-centered@ms"><input type="checkbox" aria-labelledby="select_all_chb"></td>
<td>Nome offerta</td>
<td>Nome Banca</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
<tr class="c-table__not-read">
<td scope="row" class="u-centered@ms"><input type="checkbox" aria-labelledby="select_all_chb"></td>
<td>Nome offerta</td>
<td>Nome Banca</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
<tr class="c-table__read">
<td scope="row" class="u-centered@ms"><input type="checkbox" aria-labelledby="select_all_chb"></td>
<td>Nome offerta</td>
<td>Nome Banca</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
</table>La tabella standard viene estesa tramite la classe .c-table--stacked¬ss. Il simbolo ¬ indica che la visualizzazione incolonnata della tabella avviene fino alla risoluzione di 640px ($width-small).
Per il corretto funzionamento della componente, oltre alla classe di estensione, ogni elemento td all'interno di tbody deve avere l'attributo data-th avvalorato secondo la relativa intestazione.
Stili default
| Intestazione A | Intestazione B | Intestazione C | Intestazione D |
|---|---|---|---|
| Valore A-1 | Valore B-1 | Valore C-1 | Valore D-1 |
| Valore A-2 | Valore B-2 | Valore C-2 | Valore D-2 |
| Valore A-3 | Valore B-3 | Valore C-3 | Valore D-3 |
| Valore A-4 | Valore B-4 | Valore C-4 | Valore D-4 |
<table class="c-table c-table--stacked¬ss">
<thead>
<tr>
<th scope="col">Intestazione A</th>
<th scope="col">Intestazione B</th>
<th scope="col">Intestazione C</th>
<th scope="col">Intestazione D</th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Intestazione A" scope="row">Valore A-1</td>
<td data-th="Intestazione B" scope="row">Valore B-1</td>
<td data-th="Intestazione C" scope="row">Valore C-1</td>
<td data-th="Intestazione D" scope="row">Valore D-1</td>
</tr>
<tr>
<td data-th="Intestazione A" scope="row">Valore A-2</td>
<td data-th="Intestazione B" scope="row">Valore B-2</td>
<td data-th="Intestazione C" scope="row">Valore C-2</td>
<td data-th="Intestazione D" scope="row">Valore D-2</td>
</tr>
<tr>
<td data-th="Intestazione A" scope="row">Valore A-3</td>
<td data-th="Intestazione B" scope="row">Valore B-3</td>
<td data-th="Intestazione C" scope="row">Valore C-3</td>
<td data-th="Intestazione D" scope="row">Valore D-3</td>
</tr>
<tr>
<td data-th="Intestazione A" scope="row">Valore A-4</td>
<td data-th="Intestazione B" scope="row">Valore B-4</td>
<td data-th="Intestazione C" scope="row">Valore C-4</td>
<td data-th="Intestazione D" scope="row">Valore D-4</td>
</tr>
</tbody>
</table>Le datatable sono gestite dall'omonimo script e si differenziano dalle tabelle standard perché è possibile ordinare le colonne, cercare al loro interno tramite capo di testo, impostare gli elementi visualizzati e disporre di una paginazione.
Stili default
Markup: