Esempi strutture Tabelle
Accessibilità
Usare le tabelle esclusivamente per dati tabellari, utilizzando gli attributi alt e caption, summary, th, scope, tr e td; usare l'elemento <caption> per associare didascalie a tabelle di dati, usare l'attributo summary dell'elemento <table> per fornire una descrizione dei dati riportati nella tabella.
Tutte le icone presenti nelle tabelle devono essere corredate di un testo alternativo che ne descriva la funzionalità.
Assicurarsi che le informazioni veicolate dal colore siano disponibili anche in formato testuale.
Codice
Per l'utilizzo di funzionalità complesse come l'ordinamento delle righe, la paginazione, la scelta del numero di elementi da visualizzare ed i filtri viene utilizzata la libreria JQuery DataTables. La relativa documentazione si trova a questo link.
Per un corretto funzionamento é necessario includere le librerie: dataTables.bootstrap.min.css, jquery.dataTables.min.js, dataTables.bootstrap.min.js e dataTablesEdit.js.
L'attivazione delle funzionalità e la definizione dei componenti nelle tabelle DataTables sono da impostare in dataTablesEdit.js.
User Experience
Il tag <caption> deve essere nascosto aggiungendo la classe sr-only solo quando gli elementi aggiuntivi presenti nella tabella non permettono una corretta posizione della descrizione rispetto alla tabella. Solo in quel caso é da preferire il posizionamento della descrizione nel div precedente il tag <table>.
Tabella semplice
<div class="tabella">
<h3 class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft">Titolo Tabella</h3>
<a href="#" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
<table id="tabella-base" class="table display tabella-base">
<caption class="marginBottom">Inserire descrizione tabella qui</caption>
<thead>
<tr>
<th><span class="thLabel">Colonna 1</span></th>
<th><span class="thLabel">Colonna 2</span></th>
<th><span class="thLabel">Colonna 3</span></th>
<th><span class="thLabel">Colonna 4</span></th>
<th></th>
</tr>
</thead>
<tbody >
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<a href="#" class="col-xs-8" title="Rimuovi elemento">
<span class="fa fa-trash-o"></span>
</a>
</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<a href="#" class="col-xs-8" title="Rimuovi elemento">
<span class="fa fa-trash-o"></span>
</a>
</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<a href="#" class="col-xs-8" title="Rimuovi elemento">
<span class="fa fa-trash-o"></span>
</a>
</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<a href="#" class="col-xs-8" title="Rimuovi elemento">
<span class="fa fa-trash-o"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
Titolo Tabella
LinkTabella uno
<div class="tabella">
<h3 class="col-xs-9 col-sm-10 table-title pull-left">Titolo Tabella</h3>
<a href="#" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
<table id="tabella-1" class="table display">
<caption class="marginBottom">Inserire descrizione tabella qui</caption>
<thead>
<tr>
<th><span class="thLabel">Colonna 1</span></th>
<th><span class="thLabel">Colonna 2</span></th>
<th><span class="thLabel">Colonna 3</span></th>
<th><span class="thLabel">Colonna 4</span></th>
<th></th>
</tr>
</thead>
<tbody >
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<a class="col-xs-4 noPadding" href="#" title="Modifica elemento">
<span class="fa fa-pencil"></span>
</a>
<a href="#" class="col-xs-4" title="Rimuovi elemento">
<span class="fa fa-trash-o"></span>
</a>
</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<a class="col-xs-4 noPadding" href="#" title="Modifica elemento">
<span class="fa fa-pencil"></span>
</a>
<a href="#" class="col-xs-4" title="Rimuovi elemento">
<span class="fa fa-trash-o"></span>
</a>
</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<a class="col-xs-4 noPadding" href="#" title="Modifica elemento">
<span class="fa fa-pencil"></span>
</a>
<a href="#" class="col-xs-4" title="Rimuovi elemento">
<span class="fa fa-trash-o"></span>
</a>
</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<a class="col-xs-4 noPadding" href="#" title="Modifica elemento">
<span class="fa fa-pencil"></span>
</a>
<a href="#" class="col-xs-4" title="Rimuovi elemento">
<span class="fa fa-trash-o"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
Titolo Tabella
LinkTabella con accordion
<div class="tabella">
<h3 class="col-xs-9 col-sm-10 table-title pull-left">Titolo Tabella</h3>
<a href="#" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
<div class="col-xs-12 caption noPaddingLeft">Inserire descrizione tabella qui</div>
<table id="tabella-2" class="table display">
<caption class="sr-only">Inserire descrizione dei dati della tabella</caption>
<thead>
<tr>
<th><span class="thLabel">Colonna 1</span></th>
<th><span class="thLabel">Colonna 2</span></th>
<th><span class="thLabel">Colonna 3</span></th>
<th></th>
</tr>
</thead>
<tbody role="tablist" aria-multiselectable="true">
<tr role="tab" aria-expanded="false" aria-controls="tabella-2" id="headingOne">
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<button title="Espandi/Riduci la riga" class="tabIndex-input col-xs-3 fa fa-angle-down details-control"></button>
<button type="button" class="warning btn-link noPadding" data-toggle="popover" data-placement="left" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." data-original-title="" title="Testo qui - apre il dettaglio">
<span class="fa fa-exclamation-triangle" title="Spiegazione del warning"></span>
</button>
</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<button title="Espandi/Riduci la riga" class="tabIndex-input col-xs-3 fa fa-angle-down details-control"></button>
<button type="button" class="warning btn-link noPadding" data-toggle="popover" data-placement="left" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." data-original-title="" title="Testo qui - apre il dettaglio">
<span class="fa fa-exclamation-triangle" title="Spiegazione del warning"></span>
</button>
</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<button title="Espandi/Riduci la riga" class="tabIndex-input col-xs-3 fa fa-angle-down details-control"></button>
<button type="button" class="warning btn-link noPadding" data-toggle="popover" data-placement="left" data-content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." data-original-title="" title="Testo qui - apre il dettaglio">
<span class="fa fa-exclamation-triangle" title="Spiegazione del warning"></span>
</button>
</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<span class="noPadding"></span>
<button class="tabIndex-input col-xs-3 fa fa-angle-down details-control" title="Espandi/Riduci la riga"></button>
</td>
</tr>
</tbody>
</table>
</div>
Titolo Tabella
LinkInserire descrizione tabella qui
| Colonna 1 | Colonna 2 | Colonna 3 | |
|---|---|---|---|
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
Tabella con checkbox
<div class="tabella">
<h3 class="col-xs-10 table-title pull-left noPaddingLeft">Titolo Tabella</h3>
<a href="#" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
<div class="col-xs-12 caption noPaddingLeft">Inserire descrizione tabella qui</div>
<table id="tabella-3" class="table display">
<caption class="sr-only">Inserire descrizione dei dati della tabella</caption>
<thead>
<tr>
<th scope="col" class="col-md-1">
<input type="checkbox" id="check_all">
<label for="check_all" title="Seleziona tutti">Seleziona tutti</label>
</th>
<th scope="col" class="col-md-3"><span class="thLabel">Colonna 1</span></th>
<th scope="col" class="col-md-4"><span class="thLabel">Colonna 2</span></th>
<th scope="col" class="col-md-4"><span class="thLabel">Colonna 3</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="check_1" type="checkbox" class="checkMe" title="Seleziona">
<label for="check_1" title="Seleziona questa riga"></label>
</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>
<input id="check_2" type="checkbox" class="checkMe" title="Seleziona">
<label for="check_2" title="Seleziona questa riga"></label>
</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>
<input id="check_3" type="checkbox" class="checkMe" title="Seleziona">
<label for="check_3" title="Seleziona questa riga"></label>
</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>
<input id="check_19" type="checkbox" class="checkMe" title="Seleziona">
<label for="check_19" title="Seleziona questa riga"></label>
</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>
<input id="check_20" type="checkbox" class="checkMe" title="Seleziona">
<label for="check_20" title="Seleziona questa riga"></label>
</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>
<input id="check_21" type="checkbox" class="checkMe" title="Seleziona">
<label for="check_21" title="Seleziona questa riga"></label>
</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
</tbody>
</table>
<div class="table-footer-action">
<button type="submit" class="pull-right btn btn-primary">Bottone</button>
</div>
</div>
Titolo Tabella
LinkInserire descrizione tabella qui
| Colonna 1 | Colonna 2 | Colonna 3 | |
|---|---|---|---|
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum | |
| Lorem ipsum | Lorem ipsum | Lorem ipsum |
Tabella con elementi in download
<div class="download-tab form-grey tabella">
<h3 class="col-xs-9 col-sm-10 table-title pull-left">Titolo Tabella</h3>
<a href="#" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
<div class="col-xs-12 caption">Inserire descrizione tabella qui</div>
<form class="row" id="tab-form-1">
<table class="table dataTable col-xs-12" id="download-tab-id">
<caption class="sr-only">Inserire descrizione dei dati della tabella</caption>
<thead>
<tr>
<th scope="col" class="col-xs-3"><span class="thLabel">Colonna 1</span></th>
<th scope="col" class="col-xs-8"><span class="thLabel">Colonna 2</span></th>
<th scope="col" class="no-icon col-xs-1"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<a title="Scarica elemento" href="#"><span class="fa fa-download"></span></a>
</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<a title="Scarica elemento" href="#"><span class="fa fa-download"></span></a>
</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<a title="Scarica elemento" href="#"><span class="fa fa-download"></span></a>
</td>
</tr>
</tbody>
</table>
<div class=" col-xs-12 baseFooter">
<p>Lorem ipsum dolor sit amet <a href="#">Scarica</a></p>
</div>
</form>
</div>
Tabella con icone e notifiche
<div class="tabella notifiche-tab">
<h3 class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft">Titolo Tabella</h3>
<a href="#" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
<table id="tabella-notifica" class="table dataTable">
<caption class="marginBottom">Inserire descrizione tabella qui</caption>
<thead>
<tr>
<th scope="col" class="col-md-3"><span class="thLabel">Colonna 1</span></th>
<th scope="col" class="col-md-2"><span class="thLabel">Colonna 2</span></th>
<th scope="col" class="col-md-3"><span class="thLabel">Colonna 3</span></th>
<th scope="col" class="col-md-2"><span class="thLabel">Colonna 4</span></th>
<th class="col-md-2"></th>
</tr>
</thead>
<tbody>
<tr class="unreadMessage">
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<a href="#" data-toggle="modal" data-target="#modale-1" title="Inserire suggerimento">
<div class="col-xs-5">
<span class="fa fa-file-text-o icon-wrapper">
<span class="badge">1</span>
</span>
</div>
</a>
<a href="#" data-toggle="modal" data-target="#modale-2" title="Visualizza pagamenti">
<div class="col-xs-5">
<span class="fa fa-eur icon-wrapper">
<span class="badge">1</span>
</span>
</div>
</a>
</td>
</tr>
<tr class="unreadMessage">
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<a href="#" data-toggle="modal" data-target="#modale-1" title="Inserire suggerimento">
<div class="col-xs-5">
<span class="fa fa-file-text-o icon-wrapper">
<span class="badge">1</span>
</span>
</div>
</a>
<a href="#" data-toggle="modal" data-target="#modale-2" title="Visualizza pagamenti">
<div class="col-xs-5">
<span class="fa fa-eur icon-wrapper">
<span class="badge">1</span>
</span>
</div>
</a>
</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td class="td-icons">
<a href="#" data-toggle="modal" data-target="#modale-1" title="inserire suggerimento">
<div class="col-xs-5">
<span class="fa fa-file-text-o icon-wrapper">
<span class="badge"></span>
</span>
</div>
</a>
<a href="#" data-toggle="modal" data-target="#modale-2" title="Visualizza pagamenti">
<div class="col-xs-5">
<span class="fa fa-eur icon-wrapper">
<span class="badge"></span>
</span>
</div>
</a>
</td>
</tr>
</tbody>
</table>
<!-- Modale 1-->
<div class="modal fade" id="modale-1" tabindex="-1" role="dialog" aria-labelledby="titolo-idModalLista">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-title" id="titolo-idModalLista">Titolo modale lista</div>
</div>
<div class="modal-body tabella">
<table class="table dataTable table-modal no-heading" title="Inserire descrizione qui">
<caption class="sr-only">Inserire descrizione modale</caption>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="unreadMessage">
<td>Lorem ipsum dolor</td>
<td><a href="#" class="pull-right" title="Scarica .PDF">
<span class="fa fa-file-pdf-o pdf"></span>
</a>
</td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td><a href="#" class="pull-right" title="Scarica .PDF">
<span class="fa fa-file-pdf-o pdf"></span>
</a>
</td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td><a href="#" class="pull-right" title="Scarica .PDF">
<span class="fa fa-file-pdf-o pdf"></span>
</a>
</td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td><a href="#" class="pull-right" title="Scarica .PDF">
<span class="fa fa-file-pdf-o pdf"></span>
</a>
</td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td><a href="#" class="pull-right" title="Scarica .PDF">
<span class="fa fa-file-pdf-o pdf"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link pull-right lowerText">
Link
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modale 2 -->
<div class="modal fade" id="modale-2" tabindex="-1" role="dialog" aria-labelledby="idTitoloTabella">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-title" id="idTitoloTabella">Titolo modale tabella</div>
</div>
<div class="modal-body">
<div class="tabella">
<table class="table tabella-base">
<caption class="sr-only">Inserire descrizione tabella qui</caption>
<thead>
<tr>
<th scope="col" class="col-md-3"><span class="thLabel">Colonna 1</span></th>
<th scope="col" class="col-md-3"><span class="thLabel">Colonna 2</span></th>
<th scope="col" class="col-md-3"><span class="thLabel">Colonna 3</span></th>
<th scope="col" class="col-md-2"></th>
</tr>
</thead>
<tbody >
<tr class="unreadMessage">
<td>Dato 1</td>
<td>Dato 2</td>
<td>Dato 3</td>
<td class="td-icons">
<a href="#" title="Visualizza dettaglio">
<span class="col-xs-6 col-lg-5 col-lg-offset-3 fa fa-eye"></span>
</a>
</td>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
<td>Dato 3</td>
<td class="td-icons">
<a href="#" title="Visualizza dettaglio">
<span class="col-xs-6 col-lg-5 col-lg-offset-3 fa fa-eye"></span>
</a>
</td>
</tr>
<tr>
<td>Dato 1</td>
<td>Dato 2</td>
<td>Dato 3</td>
<td class="td-icons">
<a href="#" title="Visualizza dettaglio">
<span class="col-xs-6 col-lg-5 col-lg-offset-3 fa fa-eye"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link pull-right">
Link
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Tabella con status
<div class="tabella status-tab">
<h3 class="col-xs-9 col-sm-10 table-title pull-left noPaddingLeft">Titolo Tabella</h3>
<a href="#" class="col-xs-3 col-sm-2 linkDettagli pull-right">Link</a>
<div class="col-xs-12 caption marginBottom noPaddingLeft">Inserire descrizione tabella qui</div>
<table id="tab-status" class="table display dataTable marginTop">
<caption class="sr-only">Inserire descrizione dei dati della tabella</caption>
<thead>
<tr>
<th scope="col" class="col-xs-6"><span class="thLabel">Colonna 1</span></th>
<th scope="col" class="col-xs-2"><span class="thLabel">Colonna 2</span></th>
<th scope="col" class="col-xs-2"><span class="thLabel">Colonna 3</span></th>
<th scope="col" class="col-xs-2"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-xs-6">Lorem ipsum</td>
<td class="col-xs-2">Lorem ipsum</td>
<td class="col-xs-2">Dato 1
<span class="progress">
<span class="progress-bar progress-bar-100" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width:100%" title="Stato avanzamento: 100%">
</span>
</span>
</td>
<td class="col-xs-2"><button title="Espandi\Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control"></button></td>
</tr>
<tr>
<td class="col-xs-6">Lorem ipsum</td>
<td class="col-xs-2">Lorem ipsum</td>
<td class="col-xs-2">Dato 2
<span class="progress">
<span class="progress-bar progress-bar-75" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width:75%" title="Stato avanzamento: 75%">
</span>
</span>
</td>
<td class="col-xs-2"><button title="Espandi\Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control"></button></td>
</tr>
<tr>
<td class="col-xs-6">Lorem ipsum</td>
<td class="col-xs-2">Lorem ipsum</td>
<td class="col-xs-2">Dato 3
<span class="progress">
<span class="progress-bar progress-bar-75" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" style="width:75%" title="Stato avanzamento: 75%">
</span>
</span>
</td>
<td class="col-xs-2"><button title="Espandi\Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control"></button></td>
</tr>
<tr>
<td class="col-xs-6">Lorem ipsum</td>
<td class="col-xs-2">Lorem ipsum</td>
<td class="col-xs-2">Dato 4
<span class="progress">
<span class="progress-bar progress-bar-25" role="progressbar" aria-valuenow="25"
aria-valuemin="0" aria-valuemax="100" style="width:25%" title="Stato avanzamento: 15%">
</span>
</span>
</td>
<td class="col-xs-2"><button title="Espandi\Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control"></button></td>
</tr>
<tr>
<td class="col-xs-6">Lorem ipsum</td>
<td class="col-xs-2">Lorem ipsum</td>
<td class="col-xs-2">Dato 5
<span class="progress">
<span class="progress-bar progress-bar-50" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%" title="Stato avanzamento: 50%">
</span>
</span>
</td>
<td class="col-xs-2"><button title="Espandi\Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control"></button></td>
</tr>
<tr>
<td class="col-xs-6">Lorem ipsum</td>
<td class="col-xs-2">Lorem ipsum</td>
<td class="col-xs-2">Dato 6
<span class="progress">
<span class="progress-bar progress-bar-100" role="progressbar" aria-valuenow="100"
aria-valuemin="0" aria-valuemax="100" style="width:100%" title="Stato avanzamento: 100%">
</span>
</span>
</td>
<td class="col-xs-2"><button title="Espandi\Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control"></button></td>
</tr>
<tr>
<td class="col-xs-6">Lorem ipsum</td>
<td class="col-xs-2">Lorem ipsum</td>
<td class="col-xs-2">Dato 7
<span class="progress">
<span class="progress-bar progress-bar-50" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%" title="Stato avanzamento: 50%">
</span>
</span>
</td>
<td class="col-xs-2"><button title="Espandi\Riduci riga" class="col-xs-6 tabIndex-input fa fa-angle-down details-control"></button></td>
</tr>
</tbody>
</table>
</div>
Titolo Tabella
LinkInserire descrizione tabella qui
| Colonna 1 | Colonna 2 | Colonna 3 | |
|---|---|---|---|
| Lorem ipsum | Lorem ipsum | Dato 1 | |
| Lorem ipsum | Lorem ipsum | Dato 2 | |
| Lorem ipsum | Lorem ipsum | Dato 3 | |
| Lorem ipsum | Lorem ipsum | Dato 4 | |
| Lorem ipsum | Lorem ipsum | Dato 5 | |
| Lorem ipsum | Lorem ipsum | Dato 6 | |
| Lorem ipsum | Lorem ipsum | Dato 7 |