Newsgroup: it.comp.www.html
Titolo: [CSS] Tbody e scroll auto

ho cercato a lungo ma senza successo. 
Avevo letto della possibilità di fermare thead e far scorrere solo thbody.
Ma dove imposto l'height oltre i quale viene mostrato l'overflow?
table{ height: 400px; }
thead { height:20px; }
tbody { oveflow: auto; }
se imposto height in tbody ogni cella assume quella dimensione.
se lo imposto per table non viene mostrato nulla...
Arjuna
-- 
Gnotis se auton.
 14/04/2004 20.50.17

Arjuna wrote:

Forse ti riferisci a questo:
http://www.w3.org/WAI/UA/TS/html401/cp1001/1001-THEAD-TBODY-TFOOT-OVERFLOW.html
Non funziona con IE.


ma che gli stravenisse... c'è modo di fare qualcosa di simile che vada
bene per IE (e contemporaneamente anche per i browser seri?)

 bene per IE (e contemporaneamente anche per i browser seri?)
Probabilmente giocando con i css riesci ad emulare questo comportamento:
tre div, uno sopra l'altro, in quello di mezzo  dai l'overflow:auto e 
metti una tabella con il solo tbody visibile (il resto lo metti a 
display:none). L'opposto per thead e tfoot negli altri div.
Spero funzioni, spero di essermi spiegato.
Ciao

 Ciao
no ho usati solo 2:
#tab-head tbody { display: none; }
#tab-body thead { display: none; }
#tab-body {
	height: 400px;
	overflow: auto;
}
ma cosě non va...
Arjuna
-- 
Homo sum, humani nihil a me alienum puto.
 15/04/2004 11.48.14

 
Io mi spiego male, ma i CSS non sono il tuo forte.
È un pò da adattare graficamente (la barra porta via un pò di spazio al 
tbody con IE, ma funziona
8<-----8<-----8<-----8<-----8<-----8<-----8<-----8<-----
HTML Validation Results
Document Checked
     * Character encoding: ISO-8859-1
     * Level of HTML: XHTML 1.0 Transitional
Congratulations, no errors!
8<-----8<-----8<-----8<-----8<-----8<-----8<-----8<-----
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html>
<head>
<title>Simulazione overflow su tbody</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
td {width:200px}
th {width:200px}
</style>
</head>
<body>
<div id="sopra">
<table  border="1" summary="Test table for scrollable TBODY table regions">
     <thead>
     <tr>
       <th rowspan="1" colspan="1">Rows</th>
       <th rowspan="1" colspan="1">Column 1</th>
       <th rowspan="1" colspan="1">Column 2</th>
       <th rowspan="1" colspan="1">Column 3</th>
       <th rowspan="1" colspan="1">Column 4</th>
     </tr>
   </thead>
   <tfoot style="display: none">
     <tr>
       <th rowspan="1" colspan="1">Rows</th>
       <th rowspan="1" colspan="1">Column 1 footer</th>
       <th rowspan="1" colspan="1">Column 2 footer</th>
       <th rowspan="1" colspan="1">Column 3 footer</th>
       <th rowspan="1" colspan="1">Column 4 footer</th>
     </tr>
   </tfoot>
   <tbody  style="display: none">
     <tr>
       <th rowspan="1" colspan="1">Row 1</th>
       <td rowspan="1" colspan="1">1.1</td>
       <td rowspan="1" colspan="1">2.1</td>
       <td rowspan="1" colspan="1">3.1</td>
       <td rowspan="1" colspan="1">4.1</td>
     </tr>
     </tbody>
</table>
</div>
<div id="mezzo" style="height: 300px; overflow: auto">
<table border="1" summary="Test table for scrollable TBODY table regions">
   <thead style="display: none">
     <tr>
       <th rowspan="1" colspan="1">Rows</th>
       <th rowspan="1" colspan="1">Column 1</th>
       <th rowspan="1" colspan="1">Column 2</th>
       <th rowspan="1" colspan="1">Column 3</th>
       <th rowspan="1" colspan="1">Column 4</th>
     </tr>
   </thead>
   <tfoot style="display: none">
     <tr>
       <th rowspan="1" colspan="1">Rows</th>
       <th rowspan="1" colspan="1">Column 1 footer</th>
       <th rowspan="1" colspan="1">Column 2 footer</th>
       <th rowspan="1" colspan="1">Column 3 footer</th>
       <th rowspan="1" colspan="1">Column 4 footer</th>
     </tr>
   </tfoot>
   <tbody>
     <tr>
       <th rowspan="1" colspan="1">Row 1</th>
       <td rowspan="1" colspan="1">1.1</td>
       <td rowspan="1" colspan="1">2.1</td>
       <td rowspan="1" colspan="1">3.1</td>
       <td rowspan="1" colspan="1">4.1</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 2</th>
       <td rowspan="1" colspan="1">1.2</td>
       <td rowspan="1" colspan="1">2.2</td>
       <td rowspan="1" colspan="1">3.2</td>
       <td rowspan="1" colspan="1">4.2</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 3</th>
       <td rowspan="1" colspan="1">1.3</td>
       <td rowspan="1" colspan="1">2.3</td>
       <td rowspan="1" colspan="1">3.3</td>
       <td rowspan="1" colspan="1">4.3</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 4</th>
       <td rowspan="1" colspan="1">1.4</td>
       <td rowspan="1" colspan="1">2.4</td>
       <td rowspan="1" colspan="1">3.4</td>
       <td rowspan="1" colspan="1">4.4</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 5</th>
       <td rowspan="1" colspan="1">1.5</td>
       <td rowspan="1" colspan="1">2.5</td>
       <td rowspan="1" colspan="1">3.5</td>
       <td rowspan="1" colspan="1">4.5</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 6</th>
       <td rowspan="1" colspan="1">1.6</td>
       <td rowspan="1" colspan="1">2.6</td>
       <td rowspan="1" colspan="1">3.6</td>
       <td rowspan="1" colspan="1">4.6</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 7</th>
       <td rowspan="1" colspan="1">1.7</td>
       <td rowspan="1" colspan="1">2.7</td>
       <td rowspan="1" colspan="1">3.7</td>
       <td rowspan="1" colspan="1">4.7</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 8</th>
       <td rowspan="1" colspan="1">1.8</td>
       <td rowspan="1" colspan="1">2.8</td>
       <td rowspan="1" colspan="1">3.8</td>
       <td rowspan="1" colspan="1">4.8</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 9</th>
       <td rowspan="1" colspan="1">1.9</td>
       <td rowspan="1" colspan="1">2.9</td>
       <td rowspan="1" colspan="1">3.9</td>
       <td rowspan="1" colspan="1">4.9</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 10</th>
       <td rowspan="1" colspan="1">1.10</td>
       <td rowspan="1" colspan="1">2.10</td>
       <td rowspan="1" colspan="1">3.10</td>
       <td rowspan="1" colspan="1">4.10</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 11</th>
       <td rowspan="1" colspan="1">1.11</td>
       <td rowspan="1" colspan="1">2.11</td>
       <td rowspan="1" colspan="1">3.11</td>
       <td rowspan="1" colspan="1">4.11</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 12</th>
       <td rowspan="1" colspan="1">1.12</td>
       <td rowspan="1" colspan="1">2.12</td>
       <td rowspan="1" colspan="1">3.12</td>
       <td rowspan="1" colspan="1">4.12</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 13</th>
       <td rowspan="1" colspan="1">1.13</td>
       <td rowspan="1" colspan="1">2.13</td>
       <td rowspan="1" colspan="1">3.13</td>
       <td rowspan="1" colspan="1">4.13</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 14</th>
       <td rowspan="1" colspan="1">1.14</td>
       <td rowspan="1" colspan="1">2.14</td>
       <td rowspan="1" colspan="1">3.14</td>
       <td rowspan="1" colspan="1">4.14</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 15</th>
       <td rowspan="1" colspan="1">1.15</td>
       <td rowspan="1" colspan="1">2.15</td>
       <td rowspan="1" colspan="1">3.15</td>
       <td rowspan="1" colspan="1">4.15</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 16</th>
       <td rowspan="1" colspan="1">1.16</td>
       <td rowspan="1" colspan="1">2.16</td>
       <td rowspan="1" colspan="1">3.16</td>
       <td rowspan="1" colspan="1">4.16</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 17</th>
       <td rowspan="1" colspan="1">1.17</td>
       <td rowspan="1" colspan="1">2.17</td>
       <td rowspan="1" colspan="1">3.17</td>
       <td rowspan="1" colspan="1">4.17</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 18</th>
       <td rowspan="1" colspan="1">1.18</td>
       <td rowspan="1" colspan="1">2.18</td>
       <td rowspan="1" colspan="1">3.18</td>
       <td rowspan="1" colspan="1">4.18</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 19</th>
       <td rowspan="1" colspan="1">1.19</td>
       <td rowspan="1" colspan="1">2.19</td>
       <td rowspan="1" colspan="1">3.19</td>
       <td rowspan="1" colspan="1">4.19</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 20</th>
       <td rowspan="1" colspan="1">1.20</td>
       <td rowspan="1" colspan="1">2.20</td>
       <td rowspan="1" colspan="1">3.20</td>
       <td rowspan="1" colspan="1">4.20</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 21</th>
       <td rowspan="1" colspan="1">1.21</td>
       <td rowspan="1" colspan="1">2.21</td>
       <td rowspan="1" colspan="1">3.21</td>
       <td rowspan="1" colspan="1">4.21</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 22</th>
       <td rowspan="1" colspan="1">1.22</td>
       <td rowspan="1" colspan="1">2.22</td>
       <td rowspan="1" colspan="1">3.22</td>
       <td rowspan="1" colspan="1">4.22</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 23</th>
       <td rowspan="1" colspan="1">1.23</td>
       <td rowspan="1" colspan="1">2.23</td>
       <td rowspan="1" colspan="1">3.23</td>
       <td rowspan="1" colspan="1">4.23</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 24</th>
       <td rowspan="1" colspan="1">1.24</td>
       <td rowspan="1" colspan="1">2.24</td>
       <td rowspan="1" colspan="1">3.24</td>
       <td rowspan="1" colspan="1">4.24</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 25</th>
       <td rowspan="1" colspan="1">1.25</td>
       <td rowspan="1" colspan="1">2.25</td>
       <td rowspan="1" colspan="1">3.25</td>
       <td rowspan="1" colspan="1">4.25</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 26</th>
       <td rowspan="1" colspan="1">1.26</td>
       <td rowspan="1" colspan="1">2.26</td>
       <td rowspan="1" colspan="1">3.26</td>
       <td rowspan="1" colspan="1">4.26</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 27</th>
       <td rowspan="1" colspan="1">1.27</td>
       <td rowspan="1" colspan="1">2.27</td>
       <td rowspan="1" colspan="1">3.27</td>
       <td rowspan="1" colspan="1">4.27</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 28</th>
       <td rowspan="1" colspan="1">1.28</td>
       <td rowspan="1" colspan="1">2.28</td>
       <td rowspan="1" colspan="1">3.28</td>
       <td rowspan="1" colspan="1">4.28</td>
     </tr>
     <tr>
       <th rowspan="1" colspan="1">Row 29</th>
       <td rowspan="1" colspan="1">1.29</td>
       <td rowspan="1" colspan="1">2.29</td>
       <td rowspan="1" colspan="1">3.29</td>
       <td rowspan="1" colspan="1">4.29</td>
     </tr>
   </tbody>
</table>
</div>
<div id="sotto">
<table border="1" summary="Test table for scrollable TBODY table regions">
     <thead  style="display: none">
     <tr>
       <th rowspan="1" colspan="1">Rows</th>
       <th rowspan="1" colspan="1">Column 1</th>
       <th rowspan="1" colspan="1">Column 2</th>
       <th rowspan="1" colspan="1">Column 3</th>
       <th rowspan="1" colspan="1">Column 4</th>
     </tr>
   </thead>
   <tfoot>
     <tr>
       <th rowspan="1" colspan="1">Rows</th>
       <th rowspan="1" colspan="1">Column 1 footer</th>
       <th rowspan="1" colspan="1">Column 2 footer</th>
       <th rowspan="1" colspan="1">Column 3 footer</th>
       <th rowspan="1" colspan="1">Column 4 footer</th>
     </tr>
   </tfoot>
   <tbody  style="display: none">
     <tr>
       <th rowspan="1" colspan="1">Row 1</th>
       <td rowspan="1" colspan="1">1.1</td>
       <td rowspan="1" colspan="1">2.1</td>
       <td rowspan="1" colspan="1">3.1</td>
       <td rowspan="1" colspan="1">4.1</td>
     </tr>
     </tbody>
</table>
</div>
</body>
</html>

 Io mi spiego male, ma i CSS non sono il tuo forte.
Sarà ma mica ho capido dov'è che sbaglio.
L'html è formato da due tabelle (non uso tfoot).
Formalmente mi sembra la stessa cosa che hai fatto tu:
Della prima tabella (#tab-head) imposto il body nascosto
Della seconda (#tab-body) imposto thead nascosto
Mi sembra la stessa cosa che hai fatto tu.
Poi dico che il div che contiene la tabella col body visibile deve essere
alto 400px e deve avere l'overflow auto.
Perchè dici che i CSS  non sono il mio forte?
Mica l'ho capito...
Arjuna
-- 
Homo sum, humani nihil a me alienum puto.
 15/04/2004 13.36.21

 Perchè dici che i CSS  non sono il mio forte?
 >
 > Mica l'ho capito...
Perché non ti funzionano, o sbaglio?
Comunque scherzo, siamo qui per aiutarci.
Se quello che ti ho proposto io funziona modifica quello e sei a posto.
Ciao
--
Spoken: How much is that gorilla in the window?
Take our advice, At any price, A gorilla like Magilla is mighty nice. 
Gorilla, Magilla Gorilla for sale

 Comunque scherzo, siamo qui per aiutarci.
Sto lottando da mesi contro la babele dei diversi browser.
Mi piacerebbe poter fare tutto quello che ho in mente nella progettazione
di un sito. Purtroppo però molto spesso giro in tondo cercando soluzioni ai
problemi.
Vorrei studiare per essere veramente padrone di css xhtml ma non saprei
come. Non mastico molto bene l'inglese e testi seri in italiano non ne ho
trovati.
Ho trovato l'errore. un div non chiuso... lavorare di notte non fa bene.
Ecco il sito in costruzione... suggerimenti (ce ne vogliono tanti)
http://www.mrfantasy.it/web/pagina.php?name=cerca
 
-- 
Gnotis se auton.
 15/04/2004 15.17.51

  
Certo che il lavoro non ti manca, eh?
Salut


> Certo che il lavoro non ti manca, eh?
Si sto lavorando a tre siti:
il mio (gratis)
quello di mia sorella (ovviamente gratis)
Quello di un amico (questo qui, sottopagato).
il lavoro non manca, quello che manca è il tempo...
-- 
Homo sum, humani nihil a me alienum puto.
 15/04/2004 17.24.53