Colonna fissa in tabella

**ciromonta** · 12-05-2008, 10:29

ciao, .
è possibile far rimanere una colonna di una tabella (creata dinamicamente) fissa anche facendo la scroller orizzontale (e non verticale)?

Ho provato a racchiudere la colonna in div con position: fixed (so che va solo in ie7 e ff).. ma non funziona

**Mich_** · 12-05-2008, 11:08

I browser moderni hanno la possibilita` di farlo: succede pero` solo se hai usato la marcatura corretta.

Studiati bene i tag
<thead>, <tbody>, <tfoot>
<caption>
<th>
<col>, <colgroup>
Naturalmente il CSS andra` applicato al <col>/<colgroup>, non ai singoli elementi della colonna.

Per quanto riguarda lo scroll, alcuni browser inseriscono un solo scroll se necessario se usi
overflow: auto;

Altri hanno implementato overflow-x e overflow-y (estensioni proprietarie), per cui ti conviene usare PRIMA l'overflow: auto;, poi aggiungere anche overflow-x e overflow-y (con qualche accorgimento in piu` se e` necessario validare il CSS).

**ciromonta** · 12-05-2008, 11:37

Ho capito che le regole vanno applicate al col, ma quale regole? position:fixed?

**Mich_** · 12-05-2008, 12:07

Originariamente inviato da ciromonta
Ho capito che le regole vanno applicate al col, ma quale regole? position:fixed?

No!
Se usi i position ti metti nei guai con le tue mani.

Io userei overflow oportuni, applicati al clogroup delle celle che devono scrollare.
Eventualmente puo` essere utile anche definire le dimensioni delle celle (sempre applicate al col/colgroup).

**ciromonta** · 12-05-2008, 12:27

Sono riuscito a fissare la colonna.
Ora però devo risolvere il problema dello scroller, cioè se faccio lo scroller orizzontale la colonna deve rimanere fissa, se invece faccio quello verticale la colonna non deve essere più fissa ma scorrere con il documento. come faccio?

**Mich_** · 12-05-2008, 15:21

Se non dici come hai fatto, e` impossibile rispondere a tono.

E` importante che posti:
- il codice HTML
- il codice CSS
- la DTD usata (il DOCTYPE)
in alternativa un link alla pagina.
Nota che in questa fase di test, ti conviene usare puro codice (X)HTML, senza PHP (o ASP o altro linguaggio lato server).

**ciromonta** · 12-05-2008, 16:07

Ho usato (anche se me lho sconsigliato) la position:fixed.

ecco il codice:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <title>Untitled</title>
  <meta content="Evrsoft First Page" name="GENERATOR">

<style type="text/css">
table td:first-child {position:fixed;} 
</style>
</head>

<body>
  <table width="2000px" border="1">

   <caption><div align="center">Fatturato dell'azienda XYZ</div></caption>
   
   <colgroup span="1" bgcolor="red" style="position:fixed;">

   <thead>
          <tr>
                 <th width="20%">Mesi di attivit&agrave;</th>
                 <th width="40%">Fatturato da attivit&agrave; 1 (in euro)</th>
                 <th width="40%">Fatturato da attivit&agrave; 2 (in euro)</th>
          </tr>
   </thead>

   <tfoot>
          <tr>
                 <td></td>
                 <td></td>
                 <td></td>
          </tr>

          <tr>
                 <td >Totale</td>
                 <td >450.000</td>
                 <td >45.000</td>
          </tr>
   </tfoot>

   <tbody>
          <tr>
                 <td >gen</td>
                 <td >10.000</td>
                 <td >1.000</td>
          </tr>

          <tr>
                 <td >feb</td>
                 <td >20.000</td>
                 <td >2.000</td>
          </tr>

          <tr>
                 <td >mar</td>
                 <td >30.000</td>
                 <td >3.000</td>
          </tr>

          <tr>
                 <td >apr</td>
                 <td >40.000</td>
                 <td >4.000</td>
          </tr>

          <tr>
                 <td >ago</td>
                 <td >50.000</td>
                 <td >5.000</td>
          </tr>

          <tr>
                 <td >sett</td>
                 <td >60.000</td>
                 <td >6.000</td>
          </tr>

          <tr>
                 <td height="24">ott</td>
                 <td >70.000</td>
                 <td >7.000</td>
          </tr>

          <tr>
                 <td >nov</td>
                 <td >80.000</td>
                 <td >8.000</td>
          </tr>

          <tr>
                 <td height="24" >dic</td>
                 <td >90.000</td>
                 <td >9.000</td>
          </tr>
   </tbody>
</table>
</body>
</html>

ovviamente funziona solo su ff

**Mich_** · 12-05-2008, 16:16

Mi spiace non sono in grado di aiutarti.

Io farei una cosa completamente diversa, l'ho gia` detto.
Fra le cose che farei diverse ci sono:
1. Userei una DTD piu` moderna
2. Non userei formattazione HTML (in molti casi interferisce conil CSS in modo imprevedibile)
3. Non userei posizionamenti (hai visto anche tu che hanno controindicazioni)
4. Userei i tag per il loro significato semantico; non inserirei tag a caso

**ciromonta** · 12-05-2008, 16:36

bè questa era solo una prova..

Discussione: Colonna fissa in tabella

Strumenti discussione

Ricerca discussione

Visualizza

Colonna fissa in tabella

Permessi di invio