Tabella Resposive con Bootstrap

Aggiornamento: un post più recente si trova a questo indirizzo

Le tabelle sono un elemento importante delle pagine web. Mi occuperò di mostrare un semplice esercizio in cui una tabella responsive appare e scompare dalla nostra pagina, alla pressione di un tasto. Inizialmente la tabella non sarà visibile, e potrà essere mostrata/nascosta alla pressione di un pulsante (toggle).

HTML

Partiamo dalla creazione di un container-fluid, all’interno del quale posizioniamo un pulsante e un container per la tabella. La tabella sarà composta da due colonne e da più elementi disposti in righe. Iniziamo con la creazione di una row in cui annidiamo la tabella:

<div class="container-fluid">
<!-- qui scriveremo il codice per il pulsante e la tabella -->
</div>

Ora inserisco il pulsante e faccio spazio alla tabella

<div class="container-fluid">
<div id="show-table">
<button type="button" class="btn btn-info">Toggle Table</button>
</div>
<div class="col-md-4 col-md-offset-4 tablediv">
<!-- qui si inserisce il codice della tabella -->
</div>
</div>

E arriviamo alla creazione della tabella: due colonne e diverse righe. Un dettaglio importante da non sottovalutare durante la creazione delle tabelle, è la possibilità di alternare il colore delle righe  per una migliore visualizzazione. Per questo creo una tabella di classe table-striped:

<table class="table table-striped">
<thead class="thead-inverse">
<!--qui definiamo le colonne della tabella -->
<tr>
<th>Details:</th>
<th>Values:</th>
</tr>
</thead>
<!-- qua definiamo le righe della tabella -->
<tbody>
<tr>
<td>Andrea</td>
<td>Anselmi</td>
</tr>
<tr>
<td>Bruno</td>
<td>Bianchi</td>
</tr>
<tr>
<td>Carlo</td>
<td>Conte</td>
</tr>
<tr>
<td>Davide</td>
<td>Deroma</td>
</tr>
<tr>
<td>01</td>
<td>AB</td>
</tr>
<tr>
<td>02</td>
<td>CD</td>
</tr>
<tr>
<td>03</td>
<td>EF</td>
</tr>
<tr>
<td>04</td>
<td>GH</td>
</tr>
<tr>
<td>05</td>
<td>IL</td>
</tr>
<tr>
<td>06</td>
<td>MN</td>
</tr>
<tr>
<td>07</td>
<td>OP</td>
</tr>
<tr></tbody>
</table>

Ora integriamo i codici per ottenere il risultato finale in HTML:

<div class="container-fluid">
<div id="show-table">
<button type="button" class="btn btn-info">Toggle Table</button>
</div>
<div class="col-md-4 col-md-offset-4 tablediv">
<table class="table table-striped">
<thead class="thead-inverse">
<!--qui definiamo le colonne della tabella -->
<tr>
<th>Details:</th>
<th>Values:</th>
</tr>
</thead>
<!-- qua ci vanno le righe della tabella -->
<tbody>
<tr>
<td>Andrea</td>
<td>Anselmi</td>
</tr>
<tr>
<td>Bruno</td>
<td>Bianchi</td>
</tr>
<tr>
<td>Carlo</td>
<td>Conte</td>
</tr>
<tr>
<td>Davide</td>
<td>Deroma</td>
</tr>
<tr>
<td>01</td>
<td>AB</td>
</tr>
<tr>
<td>02</td>
<td>CD</td>
</tr>
<tr>
<td>03</td>
<td>EF</td>
</tr>
<tr>
<td>04</td>
<td>GH</td>
</tr>
<tr>
<td>05</td>
<td>IL</td>
</tr>
<tr>
<td>06</td>
<td>MN</td>
</tr>
<tr>
<td>07</td>
<td>OP</td>
</tr>
<tr></tr>
</tbody>
</table>
</div>

CSS

Un tocco di CSS per definire l’impaginazione di pulsante e tabella. Per quest’ultima, definisco un bordo ben visibile e la possibilità di scorrimento nel caso in cui ci sia bisogno:

#show-table {
text-align: center;
margin-top: 20px;
}

.tablediv {
margin-top: 20px;
height: 200px;
border: 2px solid;
overflow-y: scroll;
}

Javascript/jQuery

Attendiamo il caricamento del DOM della pagina e imponiamo subito che la tabella sia da subito nascosta. Verrà mostrata e nascosta solo alla pressione del pulsante.

$(document).ready(function() {
$('.tablediv').hide();
$(".btn-info").click(function() {
$('.tablediv').toggle("display");
});
})

In questo esempio ho utilizzato .toggle("display") ma in tema di effetti, si potrebbe sostituire con .fadeToggle("slow")  oppure .fadeToggle(3000), impostando un tempo di comparsa/scomparsa in millisecondi.

Un esempio del codice sviluppato si trova qui.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.