Oggetto Tabella: bloccare una riga, idee?:) 
Autore: Simone C.Buongiorno a Tutti,
Famoso oggetto "Tabella", ormai da anni (sono passato nel corso di questo decennio e più a varie versioni del programma) ho imparato a conviverci, utilizzavo tabelle tutto sommato semplici e, salvo che sia cambiato qualcosa recentemente con le ultime versioni, io sono fermo a un oggetto "Tabella" con del potenziale, ma limitato nelle sue funzioni.
Quella di rendere l'oggetto elastico l'ho già risolta e in questi anni si sono lette qua soluzioni più che valide a seconda delle varie esigenze.
Tuttavia non ho mai letto e sono un po' fermo (non trovo una soluzione 
) per bloccare una specifica riga nell'oggetto tabella. Nello specifico mi occorrerebbe tenere fisse le prime 2 righe in alto e far scorrere il resto sotto.
Qualche suggerimento di extra codice per farlo? :)
Grazie mille in anticipo a chi interverrà! :D
... senza LINK ovviamente non si può valutare...
... a parte il caso della tabella elastica, una mia vecchia invenzione ormai nota, c'è caso e caso, e tabella e tabella...
... comunque, se vuoi far da te, ...potresti prendere spunto da una mia invenzione (x colonna) da adattarti per i tuoi scopi e che trovi in questo vecchio Topic:
https://helpcenter.websitex5.com/it/post/258816
.
ciao
.
Autore
Giusto! Prima di tutto grazie per la tua risposta KolAsim, mi fa piacere ritrovarti qui :)
Questo il link a un mio sito test, alla fine quanto poi metterò su sarà analogo a forma. Mediamente un paio o più di tabelle per pagina e graficamente simili a quelle in questa pagina test. Una di queste tabelle sarà quasi sicuramente lunga:
http://dfr.altervista.org/tabella-sample-1.html
Ho provato a giocare un po' con il codice di tua invenzione (per le colonne) per bloccare invece le prime 2 righe e far scorrere quanto sotto, ma non ne sono venuto a capo e mi è uscita fuori una cosa graficamente brutta (tagliata e sfalsata), oltre a non funzionare per quello che vorrei ottenere io... =|
Alla peggio, se non fosse possibile bloccare le prime 2 righe per più tabelle, ma solo per una sola tabella, me lo farei andare bene lo stesso e mi inventerei qualcosa poi io sul come mettere tutti i dati in un'unica tabella o spezzare in più pagine.
Nel mentre, grazie mille anticipatamente!
... OK ... questa è la mia personale interpretazione per l'attuale struttura della pagina del tuo LINK:
<style>
tr:nth-child(1), tr:nth-child(1) td {
position:sticky;top: 0;z-index: 1;/*K*/}
tr:nth-child(2),tr:nth-child(2) td{
position: sticky;top: 30px;z-index: 1;}
#imCell_9 .text-inner,#imCell_7 .text-inner
{height:500px!important;overflow-y:scroll!important;}
#imCell_9 div, #imCell_7 div{overflow:hidden !important}
</style>
.
ciao
.
Autore
Ciao KolAsim ,
Prima di tutto ti ringrazio per la tua interpretazione, ovviamente funziona ;)
[preciso che solo da browser interno di WSX5 ha un comportamnto anomalo, le prime 2 righe fuggono via e non restano fisse, ma essendo ok su tutti gli altri browser non consideriamolo ;)]
Ad ogni modo questo pomeriggio ho testato un po' la tua soluzione e per il mio uso è sostanzialmente perfetta, tranne per il fatto che le prime 2 righe restano sì fisse, ma purtroppo spariscono le linee delle righe e delle colonne per quelle 2 righe che restano appunto fissate in alto.
Se per le righe non è un gran problema, per le colenne quegli spazi trasparenti tra le celle non sono bellissimi, anche se temo che non ci sia altra via... =|
Ho provato a mitigare il problema riducendo a 1px lo spessore delle colonne (vedere la prima delle due tabelle a questo link, la seconda l'ho lasciata volutamente a 2px di spessore e lì la cosa è più visibile):
http://dfr.altervista.org/tabella-sample-1a.html
Ho provato anche un sistema a doppia tabella, ma funziona relativamente solo finché quest'ultime non si vanno a ridimensionare, poi la larghezza delle celle sballa completamente tra le 2 tabelle, con il testo più lungo della seconda tabella che ovviamente si va ad adattare:
http://dfr.altervista.org/tabella-sample-1b.html
Pertanto per ora l'opzione con le colonne di spessore 1px resta la migliore. Se però ti viene qualche altra idea fai un fischio, se no comunque grazie, è comunque una valida soluzione quella da te trovata. Attendo eventuali tue e comunque poi segnerò come corretto il tuo commento ;D
Grazie e buona serata!
... ... il tuo esempio "b" mi sembra ottimo, al limite togli lo scroll (orizzontale-verticale)...
... intanto che fai esperimenti, prova anche questo mio codice dinamico con aggiunta di un mio escamotage per le prime due righe, valido per esempio senza codice:
<script>
styleK= '<style>'+
'tr:nth-child(1), tr:nth-child(1) td {'+
'position:sticky;top: 2px;z-index: 1;/*K*/}'+
'tr:nth-child(2),tr:nth-child(2) td{'+
'position: sticky;top: 45px;z-index: 1;}'+
'#imCell_9 .text-inner,#imCell_7 .text-inner'+
'{height:500px!important;overflow-y:scroll!important;}'+
'#imCell_9 div, #imCell_7 div{overflow:hidden !important}'+
'</style>';
$("head").append(styleK)
divK = '<div class="divK" style="position:absolute;background-color:black;width:100%;height:120px;z-index:0;"></div>';
$(".text-inner table").parent().prepend(divK)
k=$("table").width();k=k-35;
$(".divK").css("width",k+ "px")
</script>
.
ciao
.
Autore
Ciao KolAsim,
Intanto al solito grazie!
Per ora l'esempio b della doppia tabella l'ho accantonato perché comunque con il design eleastico sfalsa le colonne l'una dall'altra poiché i testi dentro vanno a capo in modo diverso e alcune parole poi nell'esempio reale non potrò troncarle.
Pertanto... Tuo escamotage per le prime due righe è molto interessante! Ho provato a giocarci un po' questo pomeriggio e sento che ci siamo vicini, ma manca ancora qualcosina, mi spiego:
Qua un esempio con il tuo ultimo codice messo integralmente come scritto:
http://dfr.altervista.org/tabella-sample-1a1.html
Questo lo stesso tuo, ma da me adattato per far tornare la tabella elastica e il testo responsive sotto una certa risoluzione.
Ho anche portato il testo della prima cella della seconda riga a 2 sole lettere per evitare che poi con il ridimensionamento vada a capo e facilitarmi il compito concentrandomi sulla sola larghezza e non anche sull'altezza.
Giocando con "k=k" alla massima risoluzione (>1680px) funziona alla perfezione e non si vede uno strabordare del rettangolo nero.
Strabordare che però accade anche qui, come l'altro esempio sopra, a tutte le altre risoluzioni inferiori:
http://dfr.altervista.org/tabella-sample-1a2.html
l'elemento divK ho capito che l'hai correttamente legato alla tabella stessa e difatti rendendo la tabella elastica pure lui lo diventa.
Di rimando non ho modo se non con "k=..." di giocare con la larghezza. Provato anche in $(".divK").css("width",k+ "px") a mettere una percentuale $(".divK").css("width", "98%"), ma non funziona comunque bene:
https://dfr.altervista.org/tabella-sample-1a3.html
L'unica sarebbe forzare questo elemento a ridimensionarsi a una lunghezza definita per ogni breakpoint (miei: 1680px; 1280px; 960px; 480px), ma non saprei come fare...
Intanto grazie mille! :D
... non avevo pensato al ridimensionamento...
... se in uno degli esempi togli il codice proverò a fare una valutazione con uno dei miei codici dinamici...
.
ciao
.
Autore
Grazie KolAsim, sarebbe fantastico! :)
Questa l'esempio "sample-1a2" senza nessun codice:
http://dfr.altervista.org/tabella-sample-1a2---senza-codice.html
Come ti dicevo per semplificare le cose nella prima tabella ho portato il testo della prima cella della seconda riga a 2 sole lettere "mm" invece che "Min. mm" per evitare che poi con il ridimensionamento vada a capo il testo e l'altezza della seconda riga cambi (come invece vedrai che farà in tabella2).
Per quanto mi riguarda se si potesse aggiustare anche la sola prima tabella andrebbe davvero benissimo.
Ciao e grazie
... OK ... ... relativamente a "mm" - "Min. mm" ...dovresti fare in modo che le intestazioni siano congrue per usare lo stesso codice per ambedue le tabelle; (comunque mi pare che non dia fastidio più di tanto, altrimenti si potrebbe aggiungere un css-media-query per la seconda tabella...)
... con tabella elastica:
<script>
$( document ).ready(function() {//K>;
/** -- blocco table tr x WSx5 by KolAsim --**/
styleK= '<style>table {width:100% !important} '+
'tr:nth-child(1), tr:nth-child(1) td {'+
'position:sticky;top: 0px;z-index: 1;/*K*/}'+
'tr:nth-child(2),tr:nth-child(2) td{'+
'position: sticky;top: 45px;z-index: 1;}'+
'#imCell_9 .text-inner,#imCell_7 .text-inner'+
'{height:500px!important;overflow-y:scroll!important;}'+
'#imCell_9 div, #imCell_7 div{overflow:hidden !important}'+
'</style>';
$("head").append(styleK)
divK = '<div class="divK" style="position:absolute;background-color:silver;'+
'width:100%;height:100px;z-index:0;border-bottom:solid 4px black"></div>';
$(".text-inner table").parent().prepend(divK)
k=$("table").width();
resizeTableK()
});//K<<;
//--------------------------
$(window).resize(function() {//K1>;
resizeTableK()
});//K1<<;
//----------- f K2 --------
function resizeTableK(){//K2>;
k = $("table").width();k = k-3;
$(".divK").css("width",k+"px");
trK1H = $('tr:nth-child(1)').height();
trK2H = $('tr:nth-child(2)').height();
divKH = trK1H+trK2H;
$(".divK").css("width",k);
$(".divK").css("height",divKH+"px")
};//K2<<;
</script>
.
ciao
.
Autore
Grandissimo KolAsim!
Praticamente perfetto, ho aggiustato solo un filo il bordo e messo il testo che nella tabella si ridimensiona sotto un certo breakpoint, ma appunto davvero un ottimo codice integrativo il tuo! In WSX5 dovrebbero prenderne spunto e per gli oggetti ormai più datati fare una versione2 potenziata by KolAsim :D
Grazie mille di nuovo e speriamo che questo codice possa tornare utile anche ad altri qua ;)
Ciao