tabelle e proprietà css overflow

**moonba** · 25-08-2009, 11:26

ciao a tutti,ho cercato un pò in giro per documentarmi ma non mi è chiaro molto cosa si può effettivamente fare in merito.
Ho una tabella che contiene un sacco di dati.é possibile dopo aver attribuito una largezza e un'altezza fissa applicare alla tabella la proprietà overflow:scroll in modo che attraverso una scrollbar sia possibile visualizzare i dati in "eccesso"?

**Mich_** · 25-08-2009, 11:53

Si`, certo che e` possibile.
E se usi correttamente i tag <th>, <thead>, <tbody>, <tfoot>, <col>, <colgroup> ecc, nei brwoser piu` moderni puoi anche far scrollare il corpo e lasciare visibili le intestazioni di riga e colonna.

**moonba** · 25-08-2009, 12:07

scusa lavoro poco con le tabelle,posso chiederti gentilmente perchè una cosa così non funziona e non visualizza la scrolbar?a quale tag devo attribuire la proprietà overflow?

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type= "text/css">
#table
{
background-color:red;
overflow:scroll;
width:1px;
height:1px;
}


</style>
</head>

<body>
<table id="table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
    <td>15</td>
  </tr>
  <tr>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
  </tr>
  <tr>
    <td>21</td>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
  </tr>
</table>

</body>
</html>

**Mich_** · 25-08-2009, 12:20

Non credo che la cosa funzioni se tiri tutto all'estremo:
1px per le dimensioni non e` misura ragionevole. Devi lasciare il posto per la scrollbar e per un minimo di visualizzazione.

E dovresti usare una DTD strict (meglio se la XHTML 1.0 strict: potrebbe funzionare in parte anche in IE).

Poi testa in FireFox o altro browser serio: per IE poi potresti aver bisogno di qualche JS supplementare.

E dato che inventi una tabella, usa tutti i tag a disposizione (i piu` importanti li ho citati nella risposta precedente: qualsiasi reference HTML ti da` la sintassi da usare ed alcuni esempi).

**moonba** · 25-08-2009, 12:32

ti ringrazio Mich per la risposta.

**osvi** · 25-08-2009, 13:33

Originariamente inviato da Mich_
Si`, certo che e` possibile.
E se usi correttamente i tag <th>, <thead>, <tbody>, <tfoot>, <col>, <colgroup> ecc, nei brwoser piu` moderni puoi anche far scrollare il corpo e lasciare visibili le intestazioni di riga e colonna.

Questa soluzione è particolarmente interessante, ma non riesco a metterla in pratica (o meglio: compare una barra di troppo).

Questo è il codice: http://pastebin.com/m8e19607

grazie!

**Mich_** · 25-08-2009, 14:10

Originariamente inviato da osvi
Questa soluzione è particolarmente interessante, ma non riesco a metterla in pratica (o meglio: compare una barra di troppo).

Questo è il codice: http://pastebin.com/m8e19607

grazie!

Quel codice e` un passo nella giusta direzione, ma mancano ancora alcune cose.

1. Eliminare tutte le formattazioni HTML. I browser a volte danno la precedenza alle formattazioni HTML, altre a quelle CSS: mescolarle da` problemi che poi sembrano incomprensibili. Togli cellspacing="0" cellpadding="0" e spostali nel CSS

2. Eliminare tutte le formattazioni CSS in linea: complicano il codice e raddoppiano la dimensione dei file

3. Mancano i tag <col> e <colgroup>, da inserire tra <table> e <thead> per poter formattare correttamente le colonne

4. Sebbene non siano vietati dalla sintassi, non e` il caso di inserire tag <div> all'interno degli elementi della tabella: nel tuo caso si presentano come un errore semantico, dato che il loro uso non e` giustificato dal loro contenuto

5. All'interno dei <div> non ci puo` stare del testo direttamente; il testo deve stare dentro i tag per cui e` previsto: sebbene sia lecito per la sintassi della DTD usata, e` vietato dalle sintassi Strict, e quello che e` vietato dalle strict da` fastidio ai CSS (che sono nati con le sintassi Strict).
Comunque nel tuo caso puoi eliminare i <div> e scrivere il testo direttamente dentro i <td>

Poi per capire il problema da te segnalato, devi chiarire cosa e` "la barra di troppo". Potrebbe essere che appare la barra del body e quella della tabella: con una gestione corretta delle altezze (o larghezze, dipende dalla direzioe della barra), una delle due potrebbe sparire.

**moonba** · 25-08-2009, 14:16

....la mia richiesta era se posso applicare ad una tabella 'semplice' la proprietà overflow,senza problemi di incompatibilità tra browser e vie di "fuga varie" da explorer,perchè non mi è possibile creare sotterfugi di "nessun tipo".
nel codice che ho postato sopra ho cambiato dtd,ho aumentato dimensioni di larghezza ma nulla,non funziona.il mio intervento è limitato solo a questa soluzione.

**Mich_** · 25-08-2009, 14:42

Originariamente inviato da moonba
....la mia richiesta era se posso applicare ad una tabella 'semplice' la proprietà overflow,senza problemi di incompatibilità tra browser e vie di "fuga varie" da explorer,perchè non mi è possibile creare sotterfugi di "nessun tipo".
nel codice che ho postato sopra ho cambiato dtd,ho aumentato dimensioni di larghezza ma nulla,non funziona.il mio intervento è limitato solo a questa soluzione.

Allora la questione e` diversa.

Se il problema e` creare una tabella che scrolla (e questa era la richiesta iniziale, per come la ho capita), la soluzione c'e` ed e` molto elegante.
Ma se il problema e` far funzionare la cosa in IE, la questione e` diversa. So per certo che in IE6 non funziona (ci sono vari thread al riguardo), in IE7 non ho notizie, mentre per IE8 potrebbe funzionare. Pero` io non sono la persona piu` adatta a questo tipo di risposte, dato che non ho la possibilita` di installare quel browser (lavoro sotto linux); lascio quindi la parola ad altri.

Comunque non si tratta di "creare sotterfugi". IE e` un browser che non segue gli standard; per questo ha messo a disposizione i "commenti condizionali" (se non sai cosa sono vedi tra i "link utili"), per inserire del codice specifico per IE. E` ormai prassi fare pagine funzionanti in tutti i browser standard e poi apportare le modifiche per IE.

**osvi** · 25-08-2009, 15:04

Originariamente inviato da Mich_
Quel codice e` un passo nella giusta direzione, ma mancano ancora alcune cose.

1. Eliminare tutte le formattazioni HTML. I browser a volte danno la precedenza alle formattazioni HTML, altre a quelle CSS: mescolarle da` problemi che poi sembrano incomprensibili. Togli cellspacing="0" cellpadding="0" e spostali nel CSS

2. Eliminare tutte le formattazioni CSS in linea: complicano il codice e raddoppiano la dimensione dei file

3. Mancano i tag <col> e <colgroup>, da inserire tra <table> e <thead> per poter formattare correttamente le colonne

4. Sebbene non siano vietati dalla sintassi, non e` il caso di inserire tag <div> all'interno degli elementi della tabella: nel tuo caso si presentano come un errore semantico, dato che il loro uso non e` giustificato dal loro contenuto

5. All'interno dei <div> non ci puo` stare del testo direttamente; il testo deve stare dentro i tag per cui e` previsto: sebbene sia lecito per la sintassi della DTD usata, e` vietato dalle sintassi Strict, e quello che e` vietato dalle strict da` fastidio ai CSS (che sono nati con le sintassi Strict).
Comunque nel tuo caso puoi eliminare i <div> e scrivere il testo direttamente dentro i <td>

Poi per capire il problema da te segnalato, devi chiarire cosa e` "la barra di troppo". Potrebbe essere che appare la barra del body e quella della tabella: con una gestione corretta delle altezze (o larghezze, dipende dalla direzioe della barra), una delle due potrebbe sparire.

1-2-4-5: d'accordissimo, ma considera che era un test-case!
3: ma non sono tag supportati solo da IE?

Riguardo le barre:
- un overflow è impostato sul tbody (e genera due barre, una verticale "buona" e una orizzontale messa perchè la verticale ruba spazio)
- un overflow è impostato sul div che circonda la tabella (che genera la barra orizzontale buona)

Il problema è che non riesco proprio a togliere la barra orizzontale messa da tbody{overflow:auto;}

Discussione: tabelle e proprietà css overflow

Strumenti discussione

Ricerca discussione

Visualizza

tabelle e proprietà css overflow

Permessi di invio