tabella con intestazioni fisse

**marianne** · 19-10-2006, 14:36

Ho fatto una solta di tabella/calendario cosi' strutturata

1-gen | 2-gen | 3-gen | 4-gen | 5-gen | 6-gen | 7-gen | ....
a) ... ... ... ... ... ... ...
b)
c)
d)
e)
f)
g)
...

Putroppo ciascuna cella e' di dimensioni abbastanza grandi, per cui scrollando verso il basso per visualizzare le ultime righe, esce dallo schermo la prima riga, contenente le intestazioni per la data. Come posso fare per rendere questa riga fissa e scrollare solo il resto della tabella?

E per tenere fisse le intestazioni a) b) c) d... quando scrollo in orizzontale?
In pratica un po' come funziona un foglio di calcolo

non saprei proprio da che parte cominciare :master:

**Vincent.Zeno** · 19-10-2006, 14:43

Non credo si possa.

Proverei mettendo due tabelle,
inserendo la seconda in un div con propietà scroll: auto

**marianne** · 19-10-2006, 15:12

Qui http://www.imaputz.com/cssStuff/bigFourVersion.html
ho trovato come fissare la prima riga di intestazione con i css

Se qualcuno trova un modo semplice di fissare anche la prima colonna...

**nuky** · 19-10-2006, 15:13

Originariamente inviato da Vincent.Zeno
Non credo si possa.

Proverei mettendo due tabelle,
inserendo la seconda in un div con propietà scroll: auto

Esatto, non si può (su IE, perché sui browser standard basta impostare l'overflow del tbody).
Mettendo due tabelle si sfancula (scusate il tecnicismo

) l'allineamento delle colonne in caso di dati di dimensioni variabili.

Una soluzione è usare javascript, tempo fa avevo postato un esempio di script per scrollare le righe. Volendo lo si può adattare anche per le colonne.
Poi magari c'è qualcosa di già fatto, ma se ti piace posso modificarlo in modo da simulare anche lo scoll orizzontale.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
  <title>Questo è un esempio, so bene che un input deve essere inserito in una form :)</title>
  <style type="text/css">
    #tbDati th {background-color:yellow;}
    #tbDati tr {display:none;}
    #btSu, #btSuVeloce, #btGiu, #btGiuVeloce {width:25px; height:25px;}
  </style>
  
  <script type="text/javascript">
    var NRIGHE_VISUALIZZARE = 10;
    var VELOCITA = 100; //Più e basso il valore più è veloce lo scroll

    var oTab;
    var nRigheTab;
    var posTop = 0;
    var posBottom;
    
    var idInterval;
    
    function ColoraRighe() {
      for (var i=0; i<nRigheTab; i++) {
        if (i%2)
          oTab.rows(i).style.background="#e8e8e8";
        else
          oTab.rows(i).style.background="#c0c0c0";
      }
    }
    
    function VistaTop() {
      oTab = window.document.getElementById("tbDati");
      nRigheTab = oTab.rows.length;
      
      ColoraRighe();
      
      // Si mostrano le prime NRIGHE
      for (var i=0; i<=NRIGHE_VISUALIZZARE; i++) {
        if (i>=nRigheTab) {
          window.document.getElementById("btSu").display  = "none";
          window.document.getElementById("btGiu").display = "none";
          break; //Se ci sono meno di NRIGHE nella tabella si nasconono i bottoni
        }
        oTab.rows(i).style.display = "block";
      }

      posBottom = i-1; //Utilizzato solo se i pulsanti sono visibili
    }
    
    function VaiSu() {
      //Si esegue la funzione subito e ogni [VELOCITA] millesimi di secondo
      if (Su()) idInterval = setInterval("Su()", VELOCITA);
    }

    function VaiGiu() {
      //Si esegue la funzione subito e ogni [VELOCITA] millesimi di secondo
      if (Giu()) idInterval = setInterval("Giu()", VELOCITA);
    }
    
    function VaiSuVeloce() {
      //Si esegue la funzione subito e ogni [VELOCITA]/5 millesimi di secondo
      if (Su()) idInterval = setInterval("Su()", VELOCITA/5);
    }

    function VaiGiuVeloce() {
      //Si esegue la funzione subito e ogni [VELOCITA]/5 millesimi di secondo
      if (Giu()) idInterval = setInterval("Giu()", VELOCITA/5);
    }

    function Su() {
      if (posTop==0) return false;
      
      oTab.rows(posTop).style.display    = "block";
      oTab.rows(posBottom).style.display = "none";
      posTop--; posBottom--;
      return true;
    }

    function Giu() {
      if (posBottom==nRigheTab-1) return false;
      
      posTop++; posBottom++;
      oTab.rows(posTop).style.display    = "none";
      oTab.rows(posBottom).style.display = "block";
      return true;
    }
  </script>
</head>

<body onload="VistaTop();">
  <table border="1" id="tbDati" summary="">
    <tr><th>col1</th><th>col2</th><th>col3</th><th>col4</th></tr>
    <tr><td>00</td><td>00</td><td>00</td><td>00</td></tr>
    <tr><td>01</td><td>01</td><td>01</td><td>01</td></tr>
    <tr><td>02</td><td>02</td><td>02</td><td>02</td></tr>
    <tr><td>03</td><td>03</td><td>03</td><td>03</td></tr>
    <tr><td>04</td><td>04</td><td>04</td><td>04</td></tr>
    <tr><td>05</td><td>05</td><td>05</td><td>05</td></tr>
    <tr><td>06</td><td>06</td><td>06</td><td>06</td></tr>
    <tr><td>07</td><td>07</td><td>07</td><td>07</td></tr>
    <tr><td>08</td><td>08</td><td>08</td><td>08</td></tr>
    <tr><td>09</td><td>09</td><td>09</td><td>09</td></tr>
    <tr><td>10</td><td>10</td><td>10</td><td>10</td></tr>
    <tr><td>11</td><td>11</td><td>11</td><td>11</td></tr>
    <tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
    <tr><td>13</td><td>13</td><td>13</td><td>13</td></tr>
    <tr><td>14</td><td>14</td><td>14</td><td>14</td></tr>
    <tr><td>15</td><td>15</td><td>15</td><td>15</td></tr>
    <tr><td>16</td><td>16</td><td>16</td><td>16</td></tr>
    <tr><td>17</td><td>17</td><td>17</td><td>17</td></tr>
    <tr><td>18</td><td>18</td><td>18</td><td>18</td></tr>
    <tr><td>19</td><td>19</td><td>19</td><td>19</td></tr>
    <tr><td>20</td><td>20</td><td>20</td><td>20</td></tr>
    <tr><td>21</td><td>21</td><td>21</td><td>21</td></tr>
    <tr><td>22</td><td>22</td><td>22</td><td>22</td></tr>
    <tr><td>23</td><td>23</td><td>23</td><td>23</td></tr>
    <tr><td>24</td><td>24</td><td>24</td><td>24</td></tr>
    <tr><td>25</td><td>25</td><td>25</td><td>25</td></tr>
    <tr><td>26</td><td>26</td><td>26</td><td>26</td></tr>
    <tr><td>27</td><td>27</td><td>27</td><td>27</td></tr>
    <tr><td>28</td><td>28</td><td>28</td><td>28</td></tr>
    <tr><td>29</td><td>29</td><td>29</td><td>29</td></tr>
  </table>
  <input type="button" id="btSuVeloce"  value="&#171;" onmousedown="VaiSuVeloce();"  onmouseup="clearInterval(idInterval);" />
  <input type="button" id="btSu"        value="&lt;"   onmousedown="VaiSu();"        onmouseup="clearInterval(idInterval);" />
  <input type="button" id="btGiu"       value="&gt;"   onmousedown="VaiGiu();"       onmouseup="clearInterval(idInterval);" />
  <input type="button" id="btGiuVeloce" value="&#187;" onmousedown="VaiGiuVeloce();" onmouseup="clearInterval(idInterval);" />

</body>

Edit: azz, bella cosa l'header fisso con i css! Butto via il mio script!

**Vincent.Zeno** · 19-10-2006, 15:19

Originariamente inviato da marianne
Qui http://www.imaputz.com/cssStuff/bigFourVersion.html
ho trovato come fissare la prima riga di intestazione con i css

Se qualcuno trova un modo semplice di fissare anche la prima colonna...

Bellooooo! mi sembra, tra l'altro, di averlo già visto... :master:

intendi fissare anche la prima colonna o solo ?

**ironbear81** · 19-10-2006, 15:21

Non è proprio una soluzione ottimale...

ma magari utilizza due frame, uno per la prima riga della data
e nell'altro frame tutti gli avvenimenti...

**Vincent.Zeno** · 19-10-2006, 15:24

Originariamente inviato da ironbear81
Non è proprio una soluzione ottimale...
ma magari utilizza due frame, uno per la prima riga della data
e nell'altro frame tutti gli avvenimenti...

...di male in peggio?

**nuky** · 19-10-2006, 15:41

Originariamente inviato da Vincent.Zeno
...di male in peggio?

Il mio non era malaccio dai.

Mi sa che rimane l'unica alternativa per mantenere la prima colonna fissa.
Il trucchetto del mettodo CSS è impostare position: relative nel tr contenuto nell'intestazione. Ho provato a impostarlo a tutti i primi td di ogni riga, ma diciamo che il risultato non è proprio fantastico, visto che rimagono si fisse le prime celle, ma tutte, anche quelle al di fuori dell'area scrollabile.

Discussione: tabella con intestazioni fisse

Strumenti discussione

Ricerca discussione

Visualizza

tabella con intestazioni fisse

Permessi di invio