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:

http://i46.tinypic.com/ejh5df.jpg

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:

Codice HTML:

---

<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?

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.

Citazione:

---

Originalmente inviato da musicanapoli

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

---

Citazione:

---

Originalmente inviato da pastamadre

piazza due div affiancati

---

Ciao!

Citazione:

---

Originalmente inviato da alemoppo

Ciao!

---

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

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 :wink:

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.

Citazione:

---

Originalmente inviato da acsocmel

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;

Citazione:

---

Originalmente inviato da 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.

---

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:

Codice:

---

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

---

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

Codice:

---

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)

Codice:

---

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)

Codice:

---

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)

Codice:

---

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)

Codice:

---

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 ;)

bel lavoro :)