CSS Tablepress

Bybasbuis CSS
The CSS on this page is especially for the WordPress tablepress plug-in. It is often advisable, for example, to determine the column width, especially from the first column. This prevents strange text breaks and makes everything easier to read.
What is tablepress? It is the most used table plugin, to create perfect tables in WordPress.

CSS tablepress code snippets

Adjust CSS tablepress column width through CSS Class

You can of course adjust the width (PX) and column number of this CSS code as desired. This CSS code only adjusts the table where the CSS code is placed. The CSS class that you have to place at the bottom of the right table with “Extra CSS classes” is tablepress review. Do not place this code in the Extra CSS of your theme, or the Snippet Manager.
/* css class "tablepress-review" place in class field of the table you want to modify */
.tablepress-review .column-1 {
	width: 300px;

CSS tablepress change columns width by ID

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.
The width (px), ID and column number of this CSS code can be adjusted to your liking. This CSS code only adjusts the table of the table IDs that are in the Extra CSS. So you can place this code in the Extra CSS of your theme, or snippet manager. The N stands for the table ID that you can adjust.
/* Place this code as Extra CSS - Replace N (Number) with the ID number you wish to change. */
.tablepress-id-N .column-1 {
 width: 200px;
}

Adjust CSS Tablepress Column width of multiple IDs

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.
The width (px), IDs and column numbers of this CSS code can, of course, be adjusted to your liking. This CSS code only adjusts the table IDs you set in the Extra CSS. You place this code in the Extra CSS of your theme, or snippet manager.
/* Adjust the code an dplace the cod ein Extra CSS or a snippet manager - Replace N (Numbers) with the ID numbers you wish to adjust */
.tablepress-id-N .column-1 {
.tablepress-id-N .column-2,
.tablepress-id-N .column-4,
.tablepress-id-N .column-7 {
	width: 150px;
}

CSS adjust the column width of 1 column for all tables at the same time

The code below adjusts the width of column 1, for all tables on your website. The width (px) in this CSS code can, of course, be adjusted to your liking. Place this code in Extra CSS of your theme, or in the snippet manager.
/* Place the CSS as Extra CSS - it adjusts the width of column 1 of all tables */
.tablepress .column-1 {
	width: 200px;
}

adjust tablepress column width of multiple columns, in all tables, at the same time

The code below does almost the same as the code above, but then immediately concerns all tables on your website.
The width (px) in this CSS code can be adjusted to your liking. You place this code in the Extra CSS of your theme, or a snippet manager.
/* adjust tablepress column width of multiple columns, in all tables, at the same time */
.tablepress .column-1 {
.tablepress .column-2,
.tablepress .column-4,
.tablepress .column-7 {
	width: 200px;
}

Adjust CSS Tablepress Padding from a column of 1 table

This code adjusts the space between the edges of the table and the text. You can adjust the distance (PX) and the ID in this CSS code as desired. You can place this code in extra CSS of your theme or Snippet Manager.
/* adjust CSS Tablepress Padding from a column of 1 table */
.tablepress-id-N .column-2 {
	padding: 4px;
}

CSS tablepress background different color at Hover

This code ensures that the background of a row gets a different color at Hover. For example, the color lightblue is suitable or if you don’t want anything: none. You place this code in extra CSS of your theme, or a Snippet Manager. Please note: this concerns all tablepress tables on your website.
/* CSS tablepress background different color at Hover */
.tablepress .row-hover tr:hover td {
	background-color: lightblue;
}

Hides the lines, change font px and padding all around

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.
This code ensures that all lines are no longer visible, the font gets a fixed size and the padding can be adjusted as desired. You can adjust the Font-Size and Padding. You can place this code in extra CSS of your theme, or a Snippet Manager. Please note: this concerns all tablepress tabels on your website.

In the example below, you see that there are still lines present. With our CSS, you can easily remove those.
Css Tablepress
/* Hides the lines, change font px and padding all around */
.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress tfoot th,
.tablepress thead th {
	border: none !important;
	font-size: 14px;
	padding: 6;
}
CSS-tablepress-met-CSS-lijnen-weg

Hides the lines, changes font px, padding around, font family

This code ensures that all lines are no longer visible, the text gets a fixed font-family and size, it changes padding around, and the code adjusts the font. You can adjust font size, padding, and font family. Place this code in Extra CSS of your theme or a snippet manager. Note: this concerns all tablepress tables on your website.
Extra information fonts: These almost always work well: Tahoma or Times of Helvetica.
/* Hides the lines, changes font px, padding around, font Family */
.tablepress,
.tablepress tr,
.tablepress tbody td,
.tablepress tfoot th,
.tablepress thead th {
	border: none !important;
	font-size: 14px;
	padding: 6;
	font-family: Tahoma;
}

Variation with N to adjust some tables only

You can adjust any CSS code for tablepress so that it is only applied to certain tables. You do that by adding ID-N (N is the table number).
/* Hides the lines, changes font px, padding around, font Family in some tables*/
.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;
}

Integrate CSS for Tablepress on your website

Do you want to know how to integrate CSS code on your WordPress website? The way you integrate the code is important for a predictable, good result. Look here.

Tablepress is one of the most used table plug-ins for WordPress.

The basic version is free and there is a Pro version, where you can adjust almost everything.

We have been using the plug-in ourselves since 2014, and still use it on almost every new website we make.

Similar Posts