Un utente ha chiesto informazioni su TablePress di Wordpress

Larghezza del tavolo

Un utente ha chiesto 👇

Sto usando Tablepress per visualizzare una grande tabella con diverse colonne.

Voglio mantenere la pagina e la funzione di ordinamento fornita dalla libreria Javascript DataTables; tuttavia, quando si utilizza CSS per impostare la larghezza: 100%; e margine sinistro / destro: automatico; non funziona finché Javascript è abilitato.

L’unico modo in cui la tabella funziona con il codice CSS sopra è quando i Datatables Javascript sono disabilitati, nel qual caso tutte le righe vengono visualizzate contemporaneamente, il che lo rende molto difficile sul sito Web in quanto contiene fino a centinaia di livelli . Taglia anche alcune delle colonne.

Con una libreria Javascript abilitata, la larghezza della tabella è solo una parte della lunghezza del browser quando voglio che la larghezza della tabella sia quasi la lunghezza del browser.

Questo argomento è stato modificato 1 anno, 1 mese fa da.

Autore del plugin

(@tobiasbg)

1 anno, 1 mese fa

Ciao,

grazie per il tuo post e scusa per il disturbo.

Puoi pubblicare un link alla pagina con la tabella in cui si verifica questo problema, in modo che io possa guardare direttamente? Grazie!

Di,
Tobias

Lanciatore di thread

(@dakamuy)

1 anno, 1 mese fa

https://ffpredictor.thefantasytakeaway.com/quarterback-projections/

Attualmente la tabella non risponde alle dimensioni della finestra se modifico il browser in modo che sia più piccolo della tabella. La barra di scorrimento non scorre fino all’ultima colonna. La funzione di scorrimento nelle altre tabelle del sito sembra funzionare correttamente (puoi verificarle cliccando sui link nella parte superiore del sito). Tuttavia, si decide di non utilizzare questi blocchi di una “colonna” di ampia larghezza in cui 1 colonna si trova al 100% di larghezza simile alla tabella dei quarti di finale sopra. Questo è il mio codice CSS personalizzato

.tablepress-id-all {
}

.tablepress thead th,
.tablepress tbody td {
text-align: center;
imbottitura fondo: 5px;
imbottitura in alto: 5px;
padding-left: 0;
padding-right: 0;
}

.tablepress thead th {
sfondo: gradiente lineare (# 646464 15%, # F9F9F9);
famiglia di caratteri: Tahoma;
dimensione del carattere: 11px;
spessore del carattere: grassetto;
colore: # 000000;
}

.tablepress tfoot td,
.tablepress tfoot th {
colore: # C0C0C0;
}

.tablepress tbody td {
sfondo: gradiente lineare (# 063694 15%, # 6599FF);
famiglia di caratteri: Tahoma;
dimensione del carattere: 11px;
colore: # C0C0C0;
}

Etichetta di input .dataTables_wrapper,
Etichetta .dataTables_wrapper select {
larghezza: 50%;
}

.dataTables_paginate.paging_simple {
imbottitura: 0 50px;
imbottitura in alto: 0;
padding-right: 50px;
imbottitura fondo: 0;
padding-left: 50px;
}

.dataTables_paginate a {
colore: # f9f9f9! importante;
display: blocco in linea;
contorno: 0;
posizione: relazione;
a sinistra: 25%;
decorazione del testo: evidenziazione;
}

.dataTables_scroll {
chiaro: capanna;
}

La larghezza della pagina, la selezione / input e il titolo della tabella sembrano adattarsi alla larghezza complessiva del blocco.

Ho ottenuto ciò modificando la larghezza dei blocchi sotto “pagine” in una parola stampa. Hai quindi inserito una scorciatoia in una colonna all’interno del blocco e hai regolato la larghezza della colonna al 100%.

Tuttavia, la larghezza del tavolo è ancora troppo corta per un desktop / laptop. Riempie la larghezza di uno schermo più piccolo come un telefono, ma voglio che riempia anche una larghezza dello schermo maggiore. C’è un modo per ottenere questo risultato? Ho provato a centralizzare la tabella cambiando .dataTables_scroll in

.dataTables_scroll {
chiaro: capanna;
posizione: relazione;
a sinistra: 25%;
}
Tuttavia, lo fa, così come “larghezza: 100%”; provalo, il tavolo diventa irresponsabile e inizia a ritagliarsi su schermi più piccoli. Inoltre non corrisponde alla pagina e seleziona / cerca in alto. La tabella può essere estesa alla “ricerca”? Oppure, in caso contrario, impostarlo ancora in modo che la “ricerca” sia sempre allineata all’estremità destra della tabella? E poi centrare il centro della pagina e mantenerlo sensibile alle dimensioni dello schermo?

Nella parte superiore della pagina del collegamento pubblicato, puoi anche controllare altre tabelle facendo clic su “Proiezioni Run-Back”, “Proiezioni del ricevitore ampio”, ecc …

Le altre tabelle utilizzano la scorciatoia standard del blocco di pagina, in cui la larghezza del blocco non è “larga” attraverso le colonne. Sebbene centralizzati, hanno una larghezza molto inferiore rispetto alla larghezza del browser.

Questa risposta è stata modificata 1 anno, 1 mese fa da. Questa risposta è stata modificata 1 anno, 1 mese fa da. Questa risposta è stata modificata 1 anno, 1 mese fa da. Questa risposta è stata modificata 1 anno, 1 mese fa da. Questa risposta è stata modificata 1 anno, 1 mese fa da. Questa risposta è stata modificata 1 anno, 1 mese fa da. Autore del plugin

(@tobiasbg)

1 anno, 1 mese fa

Ciao,

il problema principale qui sembra essere che il tuo tema stia effettivamente posizionando una larghezza molto ridotta del contenuto di ogni pagina. Questo è ciò che causa tutti i problemi extra. Mi riferisco in particolare alla SEC
.has-blocks .content-area, .posts-layout-list.no-widgets-sidebar .content-area, .single.no-widgets-sidebar .content-area, .attachment.no-widgets-sidebar .content-area {max-width: 36em;}

nel file /wp-content/themes/reykjavik/assets/css/main.css

Consiglio di modificare il tema in modo che l’area del contenuto della pagina sia molto più grande. Quindi la tabella avrà già un aspetto migliore, perché si estenderà al 100% di quell’area tematica.

Di,
Tobias

Lanciatore di thread

(@dakamuy)

1 anno, 1 mese fa

Grazie per aver aiutato ad allungare la tavola.

Sto solo riscontrando un altro problema ora, quando abilito lo “scorrimento orizzontale” nell’opzione DataTables Javascript per una tabella, la tabella non si estende completamente a destra, sebbene le barre formino una pagina.

Se disabilitato, la tabella si allungherà fino a riempire lo schermo in cui si trova la pagina.

Ho lasciato Quarterback Projections con lo “scorrimento orizzontale” abilitato tramite l’opzione DataTables in modo che tu possa vedere.

Volevo lasciare abilitato questo elemento in modo da poter utilizzare anche il plug-in delle colonne fisse se le colonne della tabella iniziano a ingrandirsi e l’utente deve scorrere la tabella e non il browser.
Grazie ancora

Questa risposta è stata modificata 1 anno, 1 mese fa da. Lanciatore di thread

(@dakamuy)

1 anno, 1 mese fa

Le tabelle non sembrano espandersi completamente quando lo “scorrimento orizzontale” è abilitato tramite le opzioni della libreria Javascript di DataTables. Lo “scorrimento orizzontale” per le proiezioni trimestrali è stato abilitato nel collegamento sopra. Sono stato in grado di risolvere questo problema una volta assegnando un punteggio all’opzione e poi di nuovo. Tuttavia, quando ho provato a utilizzare “Estensione colonna fissa”, ha restituito tutto a una larghezza inferiore.

C’era anche un altro problema che ho notato con “fixedcolumn”. La colonna fissa non è stata ridimensionata correttamente, il testo nelle celle della tabella delle colonne fisse ha iniziato a essere ritagliato e la finestra è stata ridotta.

Ho provato a riempire il corpo del tavolo usando pad-right ma questo non ha risolto il mio problema.
Sembra inoltre rompere la capacità del tavolo di espandersi fino alla larghezza del materiale.

D’ora in poi ho rimosso l’estensione in modo che tu possa vedere prima il problema con le opzioni di “scorrimento orizzontale” abilitate su Quarterbacks.

Grazie per l’aiuto

Questa risposta è stata modificata 1 anno, 1 mese fa da. Questa risposta è stata modificata 1 anno, 1 mese fa da. Questa risposta è stata modificata 1 anno, 1 mese fa da. Questa risposta è stata modificata 1 anno, 1 mese fa da. Autore del plugin

(@tobiasbg)

1 anno, 1 mese fa

Ciao,

prova ad aggiungerlo al “CSS personalizzato”:

.dataTables_wrapper .tablepress {
  width: 100% !important;
}

Questo dovrebbe aiutare con l’intera larghezza qui.

Di,
Tobias

Lanciatore di thread

(@dakamuy)

1 anno, 1 mese fa

Credo che la domanda sia stata risolta, proverò più tardi sul mio schermo e darà una nuova risposta in caso di domande. Grazie!

Ho notato che le estensioni delle intestazioni fisse e delle colonne fisse non funzionano contemporaneamente.
Al momento ho attivato solo una colonna fissa poiché ho cercato di impostare la larghezza della colonna di riparazione al 100% con

.tablepress-id-all .column-1 {
larghezza: 100%;
}
Ma immagino che questo si applichi solo alla colonna quando è statica per il seguente motivo.

La colonna fissa viene visualizzata correttamente prima di scorrere in orizzontale. Ma,
quando si scorre in orizzontale, parte dei dati tagliati si troverà nella colonna fissa.
C’è un modo per regolare anche la larghezza della colonna fissa?

La visualizzazione dell’intestazione fissa non scorrerà con le colonne quando si scorre in orizzontale.

Inoltre, grazie per tutto l’aiuto finora! Il tavolo sembra molto meglio di prima.

Questa risposta è stata modificata 1 anno, 1 mese fa da. Questa risposta è stata modificata 1 anno, 1 mese fa da. Questa risposta è stata modificata 1 anno, 1 mese fa da. Autore del plugin

(@tobiasbg)

1 anno, 1 mese fa

Ciao,

bello sentire che questo ha aiutato!

Infatti le estensioni FixedHeader e FixedColumns non sono compatibili, perché le librerie JavaScript esterne che forniscono queste funzionalità non sono compatibili. Sfortunatamente, non c’è modo per me di influenzarlo.

Di,
Tobias

Was this helpful?

0 / 0

Lascia un commento 0

Your email address will not be published. Required fields are marked *