Sincronizzazione larghezza colonna tra tabelle in due frame diversi, ecc.

Question

Per motivi che sono in qualche modo inevitabili (un sacco di codice legacy, compatibilità, esigenze di progettazione) Ho il seguente problema: Ho due tabelle, una direttamente sotto l'altra , ma diviso tra due frame (vedi lo pseudo-esempio sotto il mio sig.). Ho bisogno che le larghezze delle colonne di queste tabelle si sincronizzino esattamente in modo che queste due tabelle "si comportino" come una. Il motivo è di avere una tabella 'header' che non scorrerà sopra una tabella 'data' che può scorrere.

Ora ci sono alcuni suggerimenti ovvi che non funzionano (ancora).

In primo luogo, ho sentito che usando il CSS c'è un modo per mettere una barra di scorrimento solo sulle righe della tabella, non sull'intestazione della tabella, che è l'effetto voluto qui. Sfortunatamente, questa non è un'opzione praticabile a causa delle ragioni sopra citate.

Secondo, larghezza percentuale di formattazione sulle colonne. Sfortunatamente la barra di scorrimento rovinerà la situazione e questa soluzione condivide anche un problema con la prossima soluzione possibile: la formattazione della larghezza dei pixel. Qui, se c'è un contenuto di colonna che è extra largo, queste larghezze (px o%) saranno sovrascritte in una tabella ma non nell'altra, e una larghezza di mismatching si interromperà -all- gli allineamenti verticali. Apparentemente correggere questo con una "larghezza massima" del CSS non sembra funzionare.

L'ultima soluzione possibile utilizza una sorta di Javascript e DOM per forzare dinamicamente il problema. Qui forzare una larghezza minima su ogni colonna e forzare le larghezze inferiori a scavalcare le larghezze superiori sarebbe sufficiente. Tuttavia, la possibilità di dividere un tavolo in due mentre si condividono lo stesso modello di colonna/riga sarebbe abbastanza semplice. Speriamo che questa soluzione sia fattibile e non estremamente complicata (scusate la mia attuale mancanza di conoscenza RE Javascript/DOM).

Grazie,

Skolem

<!-- In frame 1 (top, non-scrolling): --> 
<table id="t1" ...> (Just the header, really) 
    <tr> 
    <td>Name</td><td>User Image</td><td>Email</td><td>Favorite Language</td> 
    </tr> 
</table> 

<!-- In frame 2 (bottom, scrolling): --> 
<!-- table "t2" intended to have equal column widths --> 
<table id="t2" ...> (Data below the header) 
    <tr> 
    <!-- Lots of crazy stuff of wildly varying widths --> 
    <td>...</td><td>...</td><td>...</td><td>...</td> 
    </tr> 
</table> 

Answer 1

primo luogo, impostare la larghezza della t1 alla larghezza di t2. Quindi, prendi ogni td da t1 e imposta la sua larghezza corrispondente alle larghezze delle colonne di t2.

Prova questa prova del concetto: http://jsfiddle.net/HqpGp/.

È necessario jQuery e lo si modifica per funzionare con i frame, ma penso che sia un buon inizio. Sono abbastanza sicuro che la parte JS potrebbe essere scritta in un modo più carino, però.

Spero che aiuti!

Answer 2

Non ho potuto ottenere la risposta accettata per lavorare direttamente, quindi l'ho rielaborato un po ', nel caso in cui non funzioni per nessun altro.

$('.table1 tr:eq(1) td').each(function (i) { 
       var _this = $(this); 
       $('.table2 tr:eq(1) td:eq(' + i + ')').width(_this.width()); 
      });