mercoledì 20 giugno 2012

Tabella che scrolla con intestazione fissa

Vediamo come realizzare una tabella che scrolla in verticale, con la testatina che rimane fissa

Esempio

test co1 1 col 2 col 3 col4
aaa 124 23555 346 4575
bbb 51 984 98456 984
ccc 651 651 65 5
ddd 51 23434 5456 1651
eee 18 835 51 651
fff 1 6513535 833 289
ggg 19 8135 854 81
hhh 51 651 33456 21
iii 15 1535 1456456 55
lll 651 650651 06501 560
mmm 51 984 984 984
nnn 651 6513 65 5
ooo 51 651 54545 1651
ppp 18 84545 51 651
qqq 1 651 8545
rrr 19 81 8 81
sss 51 651 3 21
ttt 15 15 1 55
uuu 651 650651 06501 560
vvv 51 984 984 984
zzz 651 651 65 5

Può capitare di dover pubblicare i dati impaginati in una tabella, e a causa delle molte righe, o a causa della impaginazione del sito, si voglia lasciare fissa la testatina della tabella e scrollare i dati. Con questo esempio, realizzato utilizzando poche righe di codice CSS, vediamo come fare.

Vediamo il codice CSS

<style type="text/css">
/*il div che contiene lo scroll*/
.article {
 height: 355px;
 width: 462px;
 overflow-y:auto;
 overflow-x:hidden;
}
/*la tabella*/
.article table {
 border-collapse:collapse;
}
/*tutte le righe*/
.article table tr {
 height:30px;
}
/*tutte le celle*/
.article table tr td {
 border:1px solid #EBD13F;
 color: #C60;
 background: #F3F4D0;
 text-align:center;
}
/*la colonna di sinistra*/
.article table tr th {
 border: 1px solid #039;
 color:#069;
 background: #D7EBEE;
}
/*la testata riga fissa*/
.article table .testata {
 position: fixed;
}
/*le celle della riga fissa*/
.article table .colonna {
 background-color: green;
 color: white;
 border:1px solid #0C0;
}
/*correggo la prima riga della tabella*/
.article table .primariga {
 padding-top:30px;
}
</style>

E il codice HTML della tabella

<div class="article">
 <table cellspacing="0" cellpadding="0">
  <tr class="testata">
   <th width="52" class="colonna" scope="col">test</th>
   <th width="62" class="colonna" scope="col">co1 1</th>
   <th width="122" class="colonna" scope="col">col 2</th>
   <th width="102" class="colonna" scope="col">col 3</th>
   <th width="102" class="colonna" scope="col">col4</th>
  </tr>
  <tr class="primariga">
   <th width="52" class="primariga" scope="row">aaa
   <td width="62" class="primariga">124</td>
   <td width="122" class="primariga">23555</td>
   <td width="102" class="primariga">346</td>
   <td width="102" class="primariga">4575</td>
  </tr>
  <tr>
   <th scope="row">bbb</th>
   <td>51</td>
   <td>984</td>
   <td>98456</td>
   <td>984</td>
  </tr>
  <tr>
   <th scope="row">ccc</th>
   <td>651</td>
   <td>651</td>
   <td>65</td>
   <td>5</td>
  </tr>
  <tr>
   <th scope="row">ddd</th>
   <td>51</td>
   <td>23434</td>
   <td>5456</td>
   <td>1651</td>
  </tr>
  <tr>
   <th scope="row">eee</th>
   <td>18</td>
   <td>835</td>
   <td>51</td>
   <td>651</td>
  </tr>
  <tr>
   <th scope="row">fff</th>
   <td>1</td>
   <td>6513535</td>
   <td>833</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <th scope="row">ggg</th>
   <td>19</td>
   <td>8135</td>
   <td>854</td>
   <td>81</td>
  </tr>
  <tr>
   <th scope="row">hhh</th>
   <td>51</td>
   <td>651</td>
   <td>33456</td>
   <td>21</td>
  </tr>
  <tr>
   <th scope="row">iii</th>
   <td>15</td>
   <td>1535</td>
   <td>1456456</td>
   <td>55</td>
  </tr>
  <tr>
   <th scope="row">lll</th>
   <td>651</td>
   <td>650651</td>
   <td>06501</td>
   <td>560</td>
  </tr>
  <tr>
   <th scope="row">mmm</th>
   <td>51</td>
   <td>984</td>
   <td>984</td>
   <td>984</td>
  </tr>
  <tr>
   <th scope="row">nnn</th>
   <td>651</td>
   <td>6513</td>
   <td>65</td>
   <td>5</td>
  </tr>
  <tr>
   <th scope="row">ooo</th>
   <td>51</td>
   <td>651</td>
   <td>54545</td>
   <td>1651</td>
  </tr>
  <tr>
   <th scope="row">ppp</th>
   <td>18</td>
   <td>84545</td>
   <td>51</td>
   <td>651</td>
  </tr>
  <tr>
   <th scope="row">qqq</th>
   <td>1</td>
   <td>651</td>
   <td>8545</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <th scope="row">rrr</th>
   <td>19</td>
   <td>81</td>
   <td>8</td>
   <td>81</td>
  </tr>
  <tr>
   <th scope="row">sss</th>
   <td>51</td>
   <td>651</td>
   <td>3</td>
   <td>21</td>
  </tr>
  <tr>
   <th scope="row">ttt</th>
   <td>15</td>
   <td>15</td>
   <td>1</td>
   <td>55</td>
  </tr>
  <tr>
   <th scope="row">uuu</th>
   <td>651</td>
   <td>650651</td>
   <td>06501</td>
   <td>560</td>
  </tr>
  <tr>
   <th scope="row">vvv</th>
   <td>51</td>
   <td>984</td>
   <td>984</td>
   <td>984</td>
  </tr>
  <tr>
   <th scope="row">zzz</th>
   <td>651</td>
   <td>651</td>
   <td>65</td>
   <td>5</td>
  </tr>
 </table>
</div>

Spieghiamo

Come prima cosa notiamo nel codice HTML della tabella, la presenza di un div con class article.
Ho utilizzato questo div per realizzare lo scroll della tabella, vedi riga n. 6 del codice CSS.

Alla riga n. 31 del CSS imposto la riga che rimarrà fissa anche scrollando. Quella che nel codice HTML si trova alla riga di codice n. 3.

Ho dovuto impostare una correzione sulla prima riga di dati della tabella, per evitare che finisca sotto la riga di intestazione fissa. Per fare questo ho utilizzato una classe primariga, che nel CSS si trova alla riga di codice n. 41.

Nota bene

Questa soluzione non è particolarmente adatta, se i dati della tabella provengono da un database e possono variari di molto in larghezza, in modo incontrollato. Potrebbe succedere che il contenuto di una cella sia più lungo del valore width da noi impostato inizialmente, e quindi si verifichi un disallineamento delle celle.

2 commenti:

  1. Ho la necessità di utilizzare, per dati estratti da una tabella Mysql questa tipologia di visualizzazione. Ho provato ad eseguire copia e incolla del codice e ho visto che con Firefox 15.01 funziona perfettamente, mentro con IE8 no. L'intestazione rolla con le altre righe, mentre se mi muovo sul vostro eselmpio funziona correttamente anche con IE8.
    Grazi Fulvio.

    RispondiElimina
  2. Prova a fare un test con solo la tabella,
    potrebbe essere il codice CSS degli altri elementi nella pagina.

    RispondiElimina