9.1 Scorrimento (Scroll)
Le tabelle sono spesso utilizzate per mostrare dati strutturati, ma possono risultare complesse da visualizzare su dispositivi con schermi piccoli. Le tabelle adattive migliorano la fruizione e l'interazione con i dati su vari dispositivi, inclusi telefoni cellulari e tablet. Vediamo alcune tecniche per creare tabelle responsive.
Uno dei metodi più semplici per creare tabelle adattive è aggiungere lo scorrimento orizzontale. Questo metodo mantiene la struttura della tabella e permette agli utenti di scorrere i dati orizzontalmente su schermi stretti.
Esempio:
.table-container {
overflow-x: auto;
width: 100%;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabella Adattiva con Scorrimento</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Colonna 1</th>
<th>Colonna 2</th>
<th>Colonna 3</th>
<th>Colonna 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dati 1</td>
<td>Dati 2</td>
<td>Dati 3</td>
<td>Dati 4</td>
</tr>
<!-- Altre righe -->
</tbody>
</table>
</div>
</body>
</html>
Spiegazione del codice:
.table-container: aggiunge lo scorrimento orizzontale se la tabella supera la larghezza del contenitoretable: imposta la larghezza della tabella al 100% e unisce i bordi delle celle
9.2 Nascondere le Colonne (Column Hiding)
Questo metodo prevede di nascondere le colonne meno importanti su schermi stretti, in modo da mantenere visibili i dati principali. Questo può essere fatto tramite media queries.
Esempio:
@media (max-width: 600px) {
.hide {
display: none;
}
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabella Adattiva con Nascondimento Colonne</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Colonna 1</th>
<th>Colonna 2</th>
<th class="hide">Colonna 3</th>
<th class="hide">Colonna 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dati 1</td>
<td>Dati 2</td>
<td class="hide">Dati 3</td>
<td class="hide">Dati 4</td>
</tr>
<!-- Altre righe -->
</tbody>
</table>
</body>
</html>
Spiegazione del codice:
.hide: nasconde determinate colonne su schermi con larghezza inferiore a 600px utilizzando media queriestable: imposta la larghezza della tabella al 100% e unisce i bordi delle celle
9.3. Trasformazione in Blocchi (Stacking)
La trasformazione in blocchi converte le righe della tabella in blocchi visualizzati uno sotto l'altro su schermi stretti. Questo rende la tabella più leggibile sui dispositivi mobili.
Esempio:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
td {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
td::before {
content: attr(data-label);
font-weight: bold;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabella Adattiva con Trasformazione in Blocchi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Colonna 1</th>
<th>Colonna 2</th>
<th>Colonna 3</th>
<th>Colonna 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Colonna 1">Dati 1</td>
<td data-label="Colonna 2">Dati 2</td>
<td data-label="Colonna 3">Dati 3</td>
<td data-label="Colonna 4">Dati 4</td>
</tr>
<!-- Altre righe -->
</tbody>
</table>
</body>
</html>
Spiegazione del codice:
- Media queries: convertono la tabella in elementi blocco su schermi con larghezza inferiore a 600px
td::before: aggiunge un pseudo-elemento con il nome della colonna prima di ogni valore della cella per mantenere il contesto dei dati
9.4. Trasformazione in Card (Card Layout)
Questo metodo prevede di trasformare ogni riga della tabella in una card separata su schermi stretti. Ciò aiuta a migliorare la leggibilità dei dati sui dispositivi mobili.
Esempio:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: left;
}
@media (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
}
th {
display: none;
}
tr {
margin-bottom: 10px;
border-bottom: 2px solid #ccc;
padding-bottom: 10px;
}
td {
display: flex;
justify-content: space-between;
padding: 10px 0;
border: none;
}
td::before {
content: attr(data-label);
font-weight: bold;
margin-right: 10px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabella Adattiva con Layout a Card</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table>
<thead>
<tr>
<th>Colonna 1</th>
<th>Colonna 2</th>
<th>Colonna 3</th>
<th>Colonna 4</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Colonna 1">Dati 1</td>
<td data-label="Colonna 2">Dati 2</td>
<td data-label="Colonna 3">Dati 3</td>
<td data-label="Colonna 4">Dati 4</td>
</tr>
<!-- Altre righe -->
</tbody>
</table>
</body>
</html>
Spiegazione del codice:
- Media queries: convertono la tabella in elementi blocco e creano card su schermi con larghezza inferiore a 600px
td::before: aggiunge un pseudo-elemento con il nome della colonna prima di ogni valore della cella per mantenere il contesto dei dati
9.5 Uso di CSS Frameworks
Molti framework CSS, come Bootstrap, offrono soluzioni integrate per la creazione di tabelle adattive. L'utilizzo di questi framework semplifica il processo e fornisce stili e componenti pronti all'uso.
Esempio con Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabella Adattiva con Bootstrap</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-responsive">
<thead>
<tr>
<th>Colonna 1</th>
<th>Colonna 2</th>
<th>Colonna 3</th>
<th>Colonna 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dati 1</td>
<td>Dati 2</td>
<td>Dati 3</td>
<td>Dati 4</td>
</tr>
<!-- Altre righe -->
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Spiegazione del codice:
table.table-responsive: classe di Bootstrap che aggiunge lo scorrimento orizzontale alle tabelle su schermi stretticontainer: classe di Bootstrap per centrare e impostare la larghezza massima del contenitore
GO TO FULL VERSION