Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

Table

Table

La Tabella è una serie di colonne e righe riempite di dati testuali e può essere larga quanto la pagina, senza padding (max container).
Se la tabella ha molte colonne, dovrà essere responsive, ovvero a scorrimento orizzontale (scroll laterale).
All’interno di una tabella è molto importante gestire correttamente i contenuti e soprattuto gli spazi, lasciando adeguata spaziatura tra le voci.
E’ opportuno non utilizzare testi troppo lunghi ed evidenziare - magari utilizzando il corpo bold - il nome/id/numero della voce. Dove possibile sintetizzare i contenuti con icone significanti.

I testi all’interno delle righe vanno allineati a sinistra. Le icone possono essere allineate sia a sinistra che al centro.
Checkbox e radio button invece vanno centrati all’interno della cella.

Tabella compatta

Si ottiene aggiungendo la classe table-sm

Lista richieste rimborso
Numero Stato Data richiesta Importo Cognome Nome Stato Azioni
1 Chiusa 18/06/2026 1.230,16 € Mario Verdi C4
2 Chiusa 18/06/2026 1.230,16 € Mario Verdi C4
3 Chiusa 18/06/2026 1.230,16 € Mario Verdi C4
4 Chiusa 18/06/2026 1.230,16 € Mario Verdi C4
5 Chiusa 18/06/2026 1.230,16 € Mario Verdi C4 
<div class="table-responsive">
  <table class="table table-striped table-sm">
    <caption>
      Lista richieste rimborso
    </caption>
    <thead class="table-primary">
      <tr>
        <th scope="col" class="text-center">
          <input id="checkbox_all_2" type="checkbox" aria-label="Scegli tutte le righe" />
        </th>
        <th scope="col" class="text-center">Numero</th>
        <th scope="col">Stato</th>
        <th scope="col">Data richiesta</th>
        <th scope="col" class="text-center">Importo</th>
        <th scope="col">Cognome</th>
        <th scope="col">Nome</th>
        <th scope="col" class="text-center">Stato</th>
        <th scope="col" class="text-center">Azioni</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td class="text-center"><input id="checkbox2" type="checkbox" aria-label="Scegli riga " /></td>
        <th scope="row" class="text-center"></th>
        <td>Chiusa</td>
        <td>18/06/2026</td>
        <td class="text-center">1.230,16 €</td>
        <td>Mario</td>
        <td>Verdi</td>
        <td class="text-center">C4</td>
        <td class="text-center">
          <a class="btn btn-xs" href="#" data-toggle="tooltip" title="Modifica">
            <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-pencil"></use></svg>
            <span class="visually-hidden">modifica</span>
          </a>
          <a class="btn btn-xs" href="#" data-toggle="tooltip" title="Elimina">
            <svg class="icon icon-sm"><use xlink:href="/bootstrap-lombardia/dist/svg/sprites.svg#it-close-circle"></use></svg>
            <span class="visually-hidden">elimina riga</span>
          </a>
        </td>
      </tr>

      . . .
    </tbody>
  </table>
</div>

Tabelle base

Righe da 48px

Si ottiene aggiungendo la classe it25-sm

Numero Stato Data richiesta Importo Cognome Nome Stato Azioni
1 Chiusa 18/06/2026 1.230,16 € Mario Verdi C4
2 Chiusa 18/06/2026 1.230,16 € Mario Verdi C4
3 Chiusa 18/06/2026 1.230,16 € Mario Verdi C4 
<div class="table-responsive">
  <table class="table table-striped it25-sm">
    <thead class="table-primary">
    . . .
    </tbody>
  </table>
</div>

Righe da 80px

Si ottiene aggiungendo la classe it25-md

Numero Stato Data richiesta Importo Cognome Nome Stato Azioni
1 Chiusa 18/06/2026 1.230,16 € Mario Verdi C4
2 Chiusa 18/06/2026 1.230,16 € Mario Verdi C4
3 Chiusa 18/06/2026 1.230,16 € Mario Verdi C4 
<div class="table-responsive">
  <table class="table table-striped it25-md">
    <thead class="table-primary">
    . . .
    </tbody>
  </table>
</div>

Documentazione tecnica

Per ulteriori dettagli tecnici sulle tabelle si veda la voce:
Tabelle