De CSS op deze pagina is speciaal voor de WordPress tablepress plug-in. Het is vaak aan te raden om bijvoorbeeld de kolombreedte, vooral van de eerste kolom, zelf te bepalen. Dat voorkomt vreemde afbrekingen van teksten en maakt alles beter leesbaar.
Wat is tablepress? Het is de meest gebruikte tabel plug-in om in WordPress mooie tabellen te maken.
Wat is tablepress? Het is de meest gebruikte tabel plug-in om in WordPress mooie tabellen te maken.
CSS tablepress code snippets
CSS tablepress kolombreedte aanpassen middels CSS class
De breedte (px) en column nummer van deze CSS-code kun je uiteraard naar wens aanpassen. Deze CSS-code past alleen de tabel aan van de tabel waar de CSS-code geplaatst wordt. De CSS class die je onderaan de juiste tabel moet plaatsen bij ‘Extra CSS-klassen’ is: tablepress-review. Deze code plaats je dus niet bij Extra CSS van je thema of snippet manager.
/* css class "tablepress-review" plaatsen in class veld van de table die je wilt aanpassen*/
.tablepress-review .column-1 {
width: 300px;CSS tablepress kolombreedte per ID aanpassen
De breedte (px), ID en column nummer van deze CSS-code kun je naar wens aanpassen. Deze CSS-code past alleen de tabel aan van de tabel ID’s die in de Extra CSS staan. Deze code kun je dus wel in de Extra CSS van je thema of code plug-in plaatsen. De N staat voor de table ID die je wel aanpassen.
/* Deze code plaats je als Extra CSS - N (Nummer) vervangen door het ID nummer dat je wilt aanpassen.*/
.tablepress-id-N .column-1 {
width: 200px;
}CSS tablepress kolombreedte van meerdere ID’s aanpassen
De breedte (px), ID’s en column nummers van deze CSS-code kun je uiteraard naar wens aanpassen. Deze CSS-code past alleen de tabel aan van de tabel ID’s die in de Extra CSS staan. Deze code plaats je in Extra CSS van je thema of snippet manager.
/* Deze code pas je aan en plaats je als Extra CSS - N (Nummers) vervangen door het ID nummers die je wilt aanpassen.*/
.tablepress-id-N .column-1 {
.tablepress-id-N .column-2,
.tablepress-id-N .column-4,
.tablepress-id-N .column-7 {
width: 150px;
}CSS kolombreedte van 1 kolom bij alle tables tegelijk aanpassen
De code hieronder past de breedte van kolom 1 aan, bij alle tabellen op je website. De breedte (px) in deze CSS-code kun je uiteraard naar wens aanpassen. Deze code plaats je in Extra CSS van je thema of snippet manager.
/* Deze code plaats je als Extra CSS en past 1 kolom in alle tables aan*/
.tablepress .column-1 {
width: 200px;
}CSS tablepress kolombreedte van meerdere kolommen bij alle tabellen tegelijk aanpassen
De code hieronder doet bijna hetzelfde als de code hierboven, maar betreft dan meteen alle tabellen op je website.
De breedte (px) in deze CSS-code kun je uiteraard naar wens aanpassen. Deze code plaats je in Extra CSS van je thema of snippet manager.
De breedte (px) in deze CSS-code kun je uiteraard naar wens aanpassen. Deze code plaats je in Extra CSS van je thema of snippet manager.
/* Deze code plaats je als Extra CSS en past de genoemde kolommen in alle tables aan*/
.tablepress .column-1 {
.tablepress .column-2,
.tablepress .column-4,
.tablepress .column-7 {
width: 200px;
}CSS tablepress padding van een kolom van 1 tabel aanpassen
Deze code zorgt dat je de ruimtes tussen de randen van de tabel en de tekst kunt aanpassen. De afstand (px) en de ID in deze CSS-code kun je uiteraard naar wens aanpassen. Deze code plaats je in Extra CSS van je thema of snippet manager.
/* Deze code past de padding van een kolom aan*/
.tablepress-id-N .column-2 {
padding: 4px;
}CSS tablepress achtergrond bij hover andere kleur
Deze code zorgt dat de achtergrond van een regel een andere kleur krijgt bij hover (muis er overheen). Geschikt is bijvoorbeeld lightblue of als je niets wilt: none. Deze code plaats je in Extra CSS van je thema of een snippet manager. Let op: dit betreft alle tablepress tabellen op je website.
/* geef de achtergrond van de rij een andere kleur bij hover zoals lightblue of none*/
.tablepress .row-hover tr:hover td {
background-color: lightblue;
}Lijnen weg, font px en padding rondom aanpassen
Deze code zorgt dat alle lijnen niet meer zichtbaar zijn, het font een vaste maat krijgt en dat de padding rondom naar wens aangepast kan worden. De font-size en padding kun je uiteraard aanpassen.Deze code plaats je in Extra CSS van je thema of een snippet manager. Let op: dit betreft alle tablepress stabellen op je website.
In het voorbeeld hieronder zie dat er nog lijnen aanwezig zijn. Met CSS haal je dat eenvoudig weg.
In het voorbeeld hieronder zie dat er nog lijnen aanwezig zijn. Met CSS haal je dat eenvoudig weg.
/* alle lijnen weg, font xx px, padding rondom xx*/
.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress tfoot th,
.tablepress thead th {
border: none !important;
font-size: 14px;
padding: 6;
}
Lijnen weg, font px, padding rondom, font familie en achtergrond aanpassen
Deze code zorgt dat alle lijnen niet meer zichtbaar zijn, het font een vaste maat krijgt, de padding rondom naar wens aangepast kan worden en past het lettertype aan. De font-size, padding en font familie kun je uiteraard aanpassen. Deze code plaats je in Extra CSS van je thema of een snippet manager. Let op: dit betreft alle tablepress tabellen op je website.
Extra informatie fonts: Deze werken bijna altijd goed: Tahoma of Times of Helvetica
Extra informatie fonts: Deze werken bijna altijd goed: Tahoma of Times of Helvetica
/* alle lijnen weg, font xx px, padding rondom xx, font familie*/
.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress tfoot th,
.tablepress thead th {
border: none !important;
font-size: 14px;
padding: 6;
font-family: Tahoma;
}Variatie met een N om alleen sommige tabellen aan te passen
je kunt een CSS-code voor Tablepress aanpassen, zodat deze alleen toegepast wordt op door jou bepaalde tabellen. Dat doe je door overal -id-N toe te voegen (N is het tabel-nummer).
/* Alleen bepaalde tabellen aanpassen - lijnen weg, font xx px, padding rondom xx, font familie*/
.tablepress-id-N,
.tablepress-id-N tr,
.tablepress-id-N tbody td,
.tablepress-id-N tfoot th,
.tablepress-id-N thead th {
border: none !important;
font-size: 14px;
padding: 6;
font-family: Tahoma;
}CSS tablepress integreren op je website
Wil je weten hoe je CSS-code integreert op je WordPress website? De manier waarop je de code integreert is belangrijk voor een voorspelbaar en goed resultaat. Kijk hier.
TablePress is een van de meest gebruikte tabel plug-ins voor WordPress.
De basisversie is gratis en er is een pro versie, waar je bijna alles kunt aanpassen.
Wij zelf gebruiken de plug-in al vanaf 2014 en gebruiken deze nog steeds op bijna elke nieuwe website die we maken.
