Spalmare la visualizzazione di una tabella in più colonne

[Tom1884]

Ho un lunghissimo elenco di giocatori (un centinaio di righe) inserito dentro una <table> ricavata da una query mysql.
Es per intenderci:

1 Mario Rossi
2 Mario Rossi
3 Mario Rossi
4 Mario Rossi
5 Mario Rossi
6 Mario Rossi
7 Mario Rossi
8 Mario Rossi
9 Mario Rossi
10 Mario Rossi
...

Vorrei però che la tabella fosse "spalmata" su più colonne, in modo che tutti i giocatori compaiano (circa), nella stessa schermata del browser, senza dover scorrere la pagina.

Con CSS posso "spezzare" la table in più colonne? Tipo:

1 Mario Rossi 4 Mario Rossi 7 Mario Rossi 10 Mario Rossi
2 Mario Rossi 5 Mario Rossi 8 Mario Rossi ...
3 Mario Rossi 6 Mario Rossi 9 Mario Rossi

[Mich_]

Non c'e` che io sappia un metodo CSS per farlo.
Potrebbe forse esserci in un prossimo futuro, ma ancora per alcuni anni non sara` utilizzabile finche` la maggior parte dei brwoser non sara` stata aggiornata.

Anzitutto verifica se puoi usare una lista anziche` una tabella: spezzare una tabella su piu` colonne e` un controsenso semantico, mentre spezzare una lista e` un cosa ragionevole.

Comunque la cosa va spezzata a livello di codice HTML:

<div class="col">
Mario Rossi
Mario Rossi
    ....
Mario Rossi
  </div>
  <div class="col">
     ...ecc...
  </div>

Poi i vari col dovranno avere float: left; e width definita

DIVERSO e` se vuoi spezzare per righe:

1. ...       2. ...     3. ...
4. ...       5. ...     6. ...
7. ...

nel qual caso ti basta dare una width opportuna e float:left ad ogni[*]

[Tom1884]

Ti ringrazio! Non avevo pensato alla lista... mi sembra un ottimo escamotage!

Tuttavia, come posso mantenere una certa "tabbatura" dei dati presenti in ogni riga (es.: 1. Nome Cognome Anni), in modo da non avere pessimi allineamenti come questo:

1. Giammarco Rocca della Padula 102
2. Ivo Rea 4

[Mich_]

HTML:
<span class="nome">Giammarco</span>
    <span class="cogn">Rocca della Padula</span>
    <span class="ord">102</span>
<span class="nome">Ivo</span>
    <span class="cogn">Rea</span>
    <span class="num">4</span>  
  ...


CSS:
ol {
  margin: ...;          /* se serve */
  ...
}
li {
  margin: 0 0 0 2em;
  padding: 0;
  width: 30em;     /* da regolare */
  float: left;          /* per ordinare per riga */
}
li span {
  display: block;
  overflow: hidden;  /* da valutare */
  margin: 0 .3em 0 0;
}
li .nome {
  width: 10em;
}
li .cogn {
  width: 15em;
}
li .num {
  width: 3em;
}

Questo e` solo un esempio. Naturalmente le varie dimensioni vanno sistemate e potrebbe essere necessario aggiungere altre formattazioni in base alle esigenze e all'estetica.

Il display:block serve per trasformare in tipo block gli elementi che di default sono inline, in modo da poterne definirne le dimensioni.
Nota che il tag [list=1] gia` inserisce la numerazione; il margine sinistro ai vari[*] serve per lasciarne il posto.

[Tom1884]

Originariamente inviato da Mich_
li span {
display: block;
overflow: hidden; /* da valutare */
margin: 0 .3em 0 0;
}
li .nome {
width: 10em;
}
li .cogn {
width: 15em;
}
li .num {
width: 3em;
}
[/code]
display:block serve per trasformare in tipo block gli elementi che di default sono inline, in modo da poterne definirne le dimensioni.

Però quando mantendo display:block ogni span all'interno dello stesso[*] mi va a capo. Quando invece lo tolgo, allora nome, cognome e numero restano giustamente nella stessa riga, ma ogni riga ha gli span per i fatti suoi e non mantiene allineamento...

[Mich_]

Mi sono dimenticato il float:left a tutti gli elementi che non devono andare a capo.

li span {
  display: block;
  float: left;
  overflow: hidden;  /* da valutare */
  margin: 0 .3em 0 0;
}

[Tom1884]

Perfetto!
Ultima cosa: posso inserire negli[*]<span>... i campi di un form?

[Mich_]

I campi si`, il tag <form> invece deve stare fuori da tutto (compreso il [list=1]).

Forse non ha senso (sematico) usare il tag <span> e metterci dentro i campi: a 'sto punto e` meglio formattare direttamente i vari <input> (e altri campi), e riservare gli <span> per il testo che non puo` essere definito altrimenti.
Tieni pero` presente che gli <input> hanno delle limitazioni nella formattazione, che dipendono (anche) dal browser in uso.