Dividere una tabella in due colonne

Ciao a tutti...

Dovrei dividere la tabella in due colonne, per farvi capire meglio, ecco un'immagine d'esempio:



Preciso sin da ora che non posso modificare il codice della tabella, per cui posso solo agire sul CSS.

Il codice della tabella è come questo:

<table>
<tbody>
	<tr class="row-1">
		<td class="column-1">dfd</td><td class="column-2">63</td>
	</tr>
	<tr class="row-2">
		<td class="column-1">jjg</td><td class="column-2">55</td>
	</tr>
	<tr class="row-3">
		<td class="column-1">gg</td><td class="column-2">55</td>
	</tr>
	<tr class="row-4">
		<td class="column-1">rr</td><td class="column-2">44</td>
	</tr>
	<tr class="row-5">
		<td class="column-1">ee</td><td class="column-2">33</td>
	</tr>
	<tr class="row-6">
		<td class="column-1">catania</td><td class="column-2">23</td>
	</tr>
...............ecc.............
</tbody>
</table>

Idee?

[acsocmel]

prova con position absolute
ma se non puoi modificare l' html non so dove recuperare il genitore relative

piazza due div affiancati (divColonna1 e divColonna2) sopra alla tabella e popoli i div con delle liste. Così te ne infischi della tabella e lavori su una cosa tua. Il problema è che devi poter identificare la posizione della tabella, se non ha un id o almeno un name è rognosetto da fare ma ci si riesce con una analisi DOM in javascript.

[alemoppo]

Preciso sin da ora che non posso modificare il codice della tabella, per cui posso solo agire sul CSS.

piazza due div affiancati

Ciao!

Ciao!

giusto alemoppo, è ora che vado a nanna! 'notte a tutti

EDIT: però lui ha detto che non può modificare il codice della tabella, no che non può intervenire sul resto della pagina... 'adesso vado a nanna per davvero

[karl94]

Potresti far diventare l'elemento table un normale blocco (display: block), e usare la proprietà CSS columns, a questo punto però le righe della tabella diventeranno righe a sé stanti, quindi sarebbe più semplice gestire con opportuni float e clear.

prova con position absolute
ma se non puoi modificare l' html non so dove recuperare il genitore relative

Mi hai dato una grande idea. Utilizzare il position:absolute;

Potresti far diventare l'elemento table un normale blocco (display: block), e usare la proprietà CSS columns, a questo punto però le righe della tabella diventeranno righe a sé stanti, quindi sarebbe più semplice gestire con opportuni float e clear.

Ho provato anche questo, solo che mi serviva qualcosa che funzionasse con il CSS2...

Pensavo fosse impossibile, comunque ho trovato la soluzione.
Prendiamo il mio caso, ho 10 righe e 2 colonne.

Prima di tutto bisogna posizionare a sinistra le righe da 1 a 10:

tr.row-1, tr.row-2, tr.row-3 ........ {
position:absolute;
left:0;
}

e posizionare a "destra" le righe da 11 a 20

tr.row-11, tr.row-12, tr.row-13 ........ {
position:absolute;
left:180; /* con right:0; la colonna rimane all'estrema destra, meglio utilizzare left.
}

Così la tabella sarà divisa in due parti (come se fossero due colonne). Il problema è che, fino a questo momento, tutte le righe (sia quelle di destra che quelle di sinistra) si trovano sovrapposte, come se ci fosse un'unica riga. Impossibile dare margin-top e padding-top.
La soluzione è quella di dare ad ogni elemento (ogni cella di ogni colonna/riga) il suo stile, dando un top:+20px ad ogni riga della colonna 1 e della colonna 2...

Esempio (non metto qui tutto il codice, troppo grande e potrebbe confondere le idee):

questo è per le righe da 1 a 10 (colonna 1)

tr.row-1 td.column-1 {
    top:20px!important;
    position:absolute;
}

tr.row-2 td.column-1 {
    top:40px!important; /* da notare che ogni riga ha un top+20px
    position:absolute;
}

tr.row-3 td.column-1 {
    top:60px!important;
    position:absolute;
}

...........ecc........

questo è per le righe da 11 a 20 (colonna 2)

tr.row-11 td.column-1 {
    top:20px!important;
    position:absolute;
}

tr.row-12 td.column-1 {
    top:40px!important;
    position:absolute;
}

tr.row-13 td.column-1 {
    top:60px!important;
    position:absolute;
}

righe da 1 a 10 (colonna 2, ovvero i punti della classifica)

tr.row-1 td.column-2 {
    top:20px!important;
    position:absolute; left:100px;
}

tr.row-2 td.column-2 {
    top:40px!important;
    position:absolute; left:100px;
}

tr.row-3 td.column-2 {
    top:60px!important;
    position:absolute; left:100px;
}

righe da 11 a 20 (colonna 2)

tr.row-11 td.column-2 {
    top:20px!important;
    position:absolute; left:80px;
}

tr.row-12 td.column-2 {
    top:40px!important;
    position:absolute; left:80px;
}

tr.row-13 td.column-2 {
    top:60px!important;
    position:absolute; left:80px;
}

Stop ;)

[acsocmel]

bel lavoro :)