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> </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> </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.
