WP Table Manager : Styling Tables

1. Formatera

I verktygsfältet kan du ställa in stil för cell som: teckensnitt, teckenstorlek, textstil, bakgrundsfärg för cell, textfärg, cellens horisontella och vertikala aligment, ... Det kan användas för en enda cell eller flera celler

 

style-tabellen

 

Radhöjden och kolumnbredden kan definieras i pixlar. Var snäll gå till Menyformat> Använd kolumn / radstorlekoch välj sedan Ändra storlek på kolumn / Ändra storlek på rad. I popup-fönstret kan du välja intervall och ställa in px för kolumner eller rader. Klicka på Gjort buton till slut.

 

ändra storlek-kolumn

 

2 . Tema och sorteringsalternativ

I varje tabell kan du hitta Temaval alternativ kl Menytema. Klicka bara på ett tema för att tillämpa det.

Att använda ett tema kommer att ersätta all data och stil i tabellen. Så sättet att fortsätta är att tillämpa ett tema sedan redigera data för att skapa ditt eget tema och sedan duplicera dina tabeller.

 

theme-val

 

På samma Menytema> Alternativa färger, funktionen "Automatisk styling" hjälper dig att färga linjen på ditt bord med Header styling och Footer styling alternativ. Du kan välja mallstilar eller göra dina egna vid insticksinställningar.

 

tema-alter-färg

 

Den sorterbara parametern låter dig göra AJAX-datasortering på frontend. Du kan se på Menyformat> Sortera.

 

sort-tabell

 

Tabellen justerar handlar om att justera div som innehåller hela tabellen, centrera hela tabellen till exempel. Du hittar på Menyformat> Tabelljustering.

 

tabell-align

 

En cellhöjdpunkt finns också som tillval. Du kan aktivera den här funktionen i konfigurationen. Det är som standard inaktiverat. Du kan välja markera radjustera färg och opacitet för markering.

 

tabell-highlight

 

3 . Lägg till verktygstips på celler

På varje cell i ett bord kan du se alternativet Lägg till verktygstips när du högerklickar på det.

 

add-tooltip

 

Du kan ställa in verktygstipsbredden i pixlar. Det tar dig till ett verktygstips med en redaktör att redigera.

 

tooltip-editor

 

Lägg till innehåll och spara, du är klar, verktygstipet kommer att visas på offentlig sida på muspekaren.

 

tooltip-hover

 

4 . Rad- och kolonnfrysning

Kolonnfrysning

Kolumnfrysning finns i menyn Format> Responsiva alternativ. Du kan frysa upp till fem kolumner. Det räknas från första kol.

 

frys-line

 

För att göra kol / rad frysning finns det ett extra alternativ som låter dig fixa bordets höjd (eftersom din bordsbehållare kan ha en oändlig höjd).

 

bordshöjd

 

När du har valt kolumnen att frysa kan du bläddra på ditt bord och alltid visa den fasta kolumnen.

 

fix-line-visning av

Radfrysning

Du hittar den på Menyformat> Tabellrubrik, härifrån kan du aktivera alternativet och ställa in rader att frysa (upp till 5 rader).

 

bordsrubrik

 

Om du vill ställa in bordshöjden, vänligen vänd tillbaka till Responsiva alternativ.

Sedan kommer den första raden att frysas på frontend efter inställningen.

 

rad-frysa

 

5 . Filtrera kolumndata

Ett filtreringsalternativ är tillgängligt kl Menyformat > Filter. Du kan aktivera det genom att klicka för att aktivera allmänna datafiltreringsfält.

 

filter-kolonn

 

Exempel på filter:

 

reagerar-table-scroll

 

6 . Cellplastning och kantradie

Du kan hitta kantikonen på verktygsfältet som hjälper till att justera stoppning och kantradie på cellen.

 

padding gränserna

 

Observera att om du har använt ett tema kommer vissa anpassade css att läggas till automatiskt. Du kan ändå ändra det självklart.

 

7 . Anpassad CSS

Låt oss gå ett steg längre. Om du är webbdesigner med css-färdigheter kan du lägga till css på Menyformat> Anpassad CSS. 

 

format-custom-css

 

CSS-koden är färgad med kodspegel och kan skrivas i mindre CSS, den fungerar också!

 

custom-table-css

 

Celler, rad, kolumner har koordinater för att identifiera var och en och anpassa css på den. R är rad, C är kolumn.

 

css-uppvisande

 

8 . Responsiva WordPress tabeller

Är mina tabeller lyhörda eller använder du rullningen på små enheter?

WP Table Manager hanterar den responsiva designen med ett prioriterat verktyg, som ett alternativ. Som standard är den responsiva funktionen inaktiverad, det kommer att vara ett överflöde (häxan fungerar dock bra på mobilen). För att använda Döljer Cols alternativet bör du gå till Menyformat> Responsiva alternativ.

 

reagerar-mode

 

Det responsiva läget är avancerat, du kan definiera en prioritering för att dölja kolumner i mobilstorlekar. När kolumner är dolda kommer en mobilmeny med kryssruta att visas för att tvinga visning / dölja kolumner.  
Kolumnstorleken är fast under tabellutgåvan. Om storleken på alla kolumner är för stor för behållaren har du ett överflöde och du kan enkelt bläddra på mobila enheter.

Tabell med en rullning (bättre för en liten mängd kolumner)

 

reagerar-table-scroll

 

Tabell med dold kolumn (bättre för en stor mängd kolumner)

 

57bb0cb0ac948

 

9 . Ladda ner tabell

För att dela ditt bord till allmänheten bör du aktivera Ladda ner knappen alternativ kl Tabellflik på höger panel. Filtypen kommer att vara * .xlsx.

 

download-tabellen

 

10 . Paginering

Du hittar den här funktionen på Meny> Format i varje tabell. Använd växlingsknappen för att aktivera och välja antalet rader som ska visas på en sida.

 

sidnumrering-wptm