How to Customise Tables in TablePress

September 27, 2021

When building a website, one often needs to display data in the form of a table. One very popular (and free!) WordPress plugin that many-a-webmaster uses today is TablePress by Tobias Bäthge.

TablePress is an excellent plugin and in its default configuration can generate tables that often need little or no modification. However, sometimes tables need to be customised to fit the data they are displaying or the website they are being displayed on, and TablePress is often flexible enough to accommodate many of these bespoke needs.

More...

Tobias has already provided documentation on how to make some of these customisations as well as some examples in his FAQs. However, TablePress is even more flexible than that, especially since it makes use of the DataTables JavaScript Library by Allan Jardine (SpryMedia).

In this article, I try to widen the documentation to include as many as possible of the customisations that can be made to a TablePress table without needing to be a code-proficient website builder. These changes can be made directly within the plugin through the custom code boxes that are part of the TablePress plugin's backend. I also include the TablePress modifications Tobias has already provided explanations for (without repeating too much of the detail) and provide further examples on how to make such changes. Finally, for completeness, I review the premium extensions for TablePress that Tobias has also made available to TablePress users.

table of contents

Customisations using the DataTables JavaScript Library

Add vertical scrolling to your table

Choose which column(s) of your table should NOT be searchable

Choose which column(s) of your table should NOT be sortable

Set the default ordering column in your table when it loads

Choose the sorting options for column(s) in your table

Control the appearance of the pagination menu

Control the appearance of the length menu

Save the state of your table for when a user re-visits the page

Customisations using the TablePress 'Plugin Options' form

Set column width in your table

Centring the data in your table

Change the colour and font attributes of the table header and footer rows

Change the colour of a single row

Change the colour and font attributes of the data rows

Change the colour used to differentiate between alternate rows

Change the hover highlight colour of a table row

Change the colour of the sorted column header

Highlight specific cells in your table

Highlight specific cells (dynamically) in your table(s)

Remove any borders from your table

Other Extensions to TablePress tables (from Tobias)

Make your table Responsive

Add function buttons to your table

Make your table convert any URLs into hyperlinks automatically

Fix the header row in place when scrolling through your table

Add column filter boxes to your table

Add column filter drop-down menus to your table

Make the 1st column in your table a row counter

Other TablePress extensions that did not work properly for me

Customisations using the DataTables JavaScript Library

The customisations in this section should be placed in the 'Custom Commands' box of the 'Features of the DataTables JavaScript Library' settings panel of the TablePress table being modified:

Custom commands box for the DataTables JavaScript library

Add vertical scrolling to your table

The simplest way to add vertical scrolling to your TablePress table is to simply add the following code to the 'Custom Commands' box in the 'Features of the DataTables JavaScript Library' panel found in the table backend:

"scrollY": "200px",
"scrollCollapse": true

"scrollY": "200px" = Sets the maximum vertical size of the table on the page. If there are more data rows than fit in this vertical space, the table becomes scrollable to the user so the hidden rows can be viewed.
"scrollCollapse": true = In the event the data in the table requires less vertical space than the length provided (in this case 200px), then the table will shrink to encapsulate the data without leaving any empty white space at the bottom.

Example: As can be seen in the accompanying TablePress table, the height of the table is 200px which is not sufficient to show all the data in one go. As a result, the table becomes vertically scrollable.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	553
3	Betty	Swan	25	343
4	Sam	Beckett	66	764
5	Simon	Templar	33	923
6	Angela	Landsbury	22	232
7	Antoine	Sakr	36	882
8	Fazil	Hussein	23	222
9	Silvia	Bertaloni	45	333
10	Fiona	White	32	547
11	Paul	Atriedes	54	743

Choose which column(s) of your table should NOT be searchable

When a TablePress table is made searchable (see below for how to activate search), the search algorithm includes all of the data in the table to which it can match the search keywords. However, you can choose to exclude certain columns of the table if they should not make up part of the search scope. To do this, add the following code to the 'Custom Commands' box in the 'Features of the DataTables JavaScript Library' section of the TablePress table:

"columnDefs": [{
	"targets": [ 2 ],
	"searchable": false
	}]

"targets": [ 2 ] = the column(s) to be made non-searchable. Counting begins from the left.

NB: first column = 0 when using the DataTables library

Example: Using the search input box at the top of the accompanying table, if you search for any of the entries in the 'Last Names' column, it will NOT bring up any of the rows of the table.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	553
3	Betty	Swan	25	343
4	Sam	Beckett	66	764
5	Simon	Templar	33	923
6	Angela	Landsbury	22	232
7	Antoine	Sakr	36	882
8	Fazil	Hussein	23	222
9	Silvia	Bertaloni	45	333
10	Fiona	White	32	547
11	Paul	Atriedes	54	743

Importantly, the option for filtering / searching in the 'Features of the DataTables JavaScript Library' section of the TablePress table being customised needs to be selected:

Settings panel for the DataTables JavaScript library features emphasising the Search-enable option

Choose which column(s) of your table should NOT be sortable

By default, when sorting is turned on for a TablePress table, all of the columns in that table can be sorted on. However, in some circumstances, this is undesirable or inappropriate for the data being presented. To turn off the sorting feature on one or more columns, add the following code to the 'Custom Commands' box in the 'Features of the DataTables JavaScript Library' panel for that table:

 "columnDefs": [{
	"targets": [ 3 ],
	"sortable": false
	}]

"targets": [ 3 ] = the column(s) to be made non-sortable. Column number counts from the left.
NB: first column = 0 when using the DataTables library

Example: In the accompanying table, the 'Age' column has been set so that it cannot be used to sort the data.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	553
3	Betty	Swan	25	343
4	Sam	Beckett	66	764
5	Simon	Templar	33	923
6	Angela	Landsbury	22	232
1	Tom	Sakr	36	882
7	Fiona	Hussein	23	222
8	Silvia	Bertaloni	45	333
7	Fiona	White	32	547
7	Paul	Atriedes	54	743

Importantly, the option to enable sorting in the 'Features of the DataTables JavaScript Library' section of the TablePress table needs to be selected (as shown below):

Settings panel for the DataTables JavaScript library features emphasising the Sorting-enable option

Set the default ordering column in your table when it loads

When a TablePress table first loads on a webpage, the order of the rows is determined by the row order in the backend of the table. However, you can set the order of the rows according to the ascending or descending order of one of the columns. To achieve this, add the following code to the 'Custom Commands' box for that table:

"order": [ 3, "desc" ]

3 = the column number that will sort the table at load-time. Counting starts from the leftmost column.
NB: first column = 0 when using the DataTables library

"desc" = descending order

"asc"= ascending order

Example: As you can see in the accompanying table, the web page loads with the table sorted according to the descending order of the 'Age' column.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	553
3	Betty	Swan	25	343
4	Sam	Beckett	66	764
5	Simon	Templar	33	923
6	Angela	Landsbury	22	232
7	Antoine	Sakr	36	882
8	Fazil	Hussein	23	222
9	Silvia	Bertaloni	45	333
10	Fiona	White	32	547
11	Paul	Atriedes	54	743

Importantly, the option to enable sorting in the 'Features of the DataTables JavaScript Library' section of the TablePress table needs to be selected:

Premium Extension

An alternative way such 'on page-load' table sorting can also be achieved is to use a premium extension created by Tobias Bäthge (the author of TablePress) where you can specify the default ordering column within the table shortcode itself. His extension also allows you to set the column to 'reverse' or 'random' order relative to how the table is arranged in its backend, and the premium extension can even allow you to specify the order of the rows manually.

Choose the sorting options for column(s) in your table

By default, when sorting is turned on for a TablePress table, all of the columns in that table can be sorted in either ascending order or descending order by consecutively clicking on the header row for that column. However, in some circumstances, you may want to only let a column be sortable in one of these orientations or to have the column begin with sorting in descending order (instead of ascending) on the first click. In order to control the sorting features on one or more columns, the following sample code can be customised and added to the Custom Commands DataTables box for that table:

"aoColumns": [
	null,
	null,
	{ "orderSequence": [ "asc" ] },
	{ "orderSequence": [ "desc", "asc" ] },
	{ "orderSequence": [ "desc" ] 
	}]

Each entry within the square brackets (separated by a comma) represents a column in the table, beginning from the leftmost column.
null = default ordering.
"asc" = ascending order allowed only.
"desc" = descending order allowed only.
NB: {"orderSequence": [ "desc", "asc" ]} is equivalent to null except that the first click of the mouse will sort in descending order first, followed by ascending order when clicked again. This is the opposite to the default (null) ordering click sequence.

Example: In the accompanying Tablepress table, the 'Last Name' column (4th column) can only be sorted in ascending order, while the 'Score' column (6th column) can only be sorted in descending order.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	553
3	Betty	Swan	25	343
4	Sam	Beckett	66	764
5	Simon	Templar	33	923
6	Angela	Landsbury	22	232
1	Tom	Sakr	36	882
7	Fiona	Hussein	23	222
8	Silvia	Bertaloni	45	333
7	Fiona	White	32	547
7	Paul	Atriedes	54	743

Once again, the option for enabling sorting in the 'Features of the DataTables JavaScript Library' section of the TablePress table needs to be selected (as shown below):

Control the appearance of the pagination menu

The default TablePress pagination menu

By default, when page navigation is turned on for a TablePress table that has more than 10 rows, the pagination menu at the bottom right of the table will simply show 'Previous' and 'Next' page navigation links. However, a couple of other minor display customisations are available if preferred.

Firstly, individual page numbers can be shown in the pagination menu so that specific pages can be reached directly via a single click. In addition, links to the 'First' and 'Last' pages can also be displayed, which is useful if the table consists of multiple 'pages'. By including the following code in the Custom Commands box of the DataTables JavaScript Library section of the table options, the pagination menu can take on one of a small number of styles:

"pagingType": "full_numbers"

For this code snippet, the following alternative parameters can be used:
"full_numbers" = displays 'First Previous 1 2 Next Last'
"full" = displays 'First Previous Next Last'
"simple_numbers" = displays 'Previous 1 2 Next'
"first_last_numbers" = displays 'First 1 2 Last'

Example: In the accompanying table, the "full_numbers" parameter has been used to show all available pagination menu links.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	553
3	Betty	Swan	25	343
4	Sam	Beckett	66	764
5	Simon	Templar	33	923
6	Angela	Landsbury	22	232
1	Tom	Sakr	36	882
7	Fiona	Hussein	23	222
8	Silvia	Bertaloni	45	333
7	Fiona	White	32	547
7	Paul	Atriedes	54	743

Importantly, the option for enabling pagination in the 'Features of the DataTables JavaScript Library' section of the TablePress table needs to be selected (as shown below):

Settings panel for the DataTables JavaScript library features emphasising the Pagination-enable option

Control the appearance of the length menu

The default TablePress table length menu

The default TablePress length menu

By default, when page navigation and the ability for the user to change the number of displayed rows are both turned on for a TablePress table, the table not only shows page navigation links at the bottom right, but also the 'number-of-displayed-rows-per-page' menu (referred to as the 'length menu') at the top left of the table.

The appearance of this menu can be set to show different options for the number of rows to display by including the following example code in the Custom Commands box of the DataTables JavaScript Library panel:

"lengthMenu": [[2, 5, 8, -1], [2, 5, 8, "All"]]

The 1st set of numbers in square brackets indicates what the backend value options actually are, while the 2nd set of square brackets contain the options that will be displayed to the user.

NB: the -1 value means that all the rows of the table will be displayed (when 'All' is selected by the user).

Example: As can be seen in the accompanying table, clicking on the length menu reveals that the table length options have been changed to '2, 5, 8, All' from the default '10, 20, (etc)' ones.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	553
3	Betty	Swan	25	343
4	Sam	Beckett	66	764
5	Simon	Templar	33	923
6	Angela	Landsbury	22	232
1	Tom	Sakr	36	882
7	Fiona	Hussein	23	222
8	Silvia	Bertaloni	45	333
7	Fiona	White	32	547
7	Paul	Atriedes	54	743

Importantly, the options for enabling pagination and allowing the user to change the number of rows shown need to be selected for that table (as shown below):

Settings panel for the DataTables JavaScript library features emphasising the Pagination-enable option and the option to allow visitors to change the number of rows shown

Premium Extension

If you are happy with the number-of-rows-to-display options available in the default length menu and you simply want to add an 'All' option to the bottom of the menu so that all entries in a table are shown at the same time, you can also use a premium extension once again written by the author of TablePress. The extension is called the Pagination Length Change “All” Entry extension and is available here.

Save the state of your table for when a user re-visits the page

By default, if a user visits another page after making sorting or other user-interactive changes to a TablePress table, those changes are not preserved and the table returns to its default state if the user returns to the page (even when using the back button on the browser). Fortunately, you can make it so that the state of your table can be saved for the user if they view the page again. By adding the following code to the Custom Commands box of the DataTables JavaScript Library section of the table options, the state of the table is saved within the browser:

"stateSave": true

Example: If you make sorting changes to the accompanying table and then visit another webpage before returning to this table, the sorting changes should still be preserved.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	553
3	Betty	Swan	25	343
4	Sam	Beckett	66	764
5	Simon	Templar	33	923
6	Angela	Landsbury	22	232
1	Tom	Sakr	36	882
7	Fiona	Hussein	23	222
8	Silvia	Bertaloni	45	333
7	Fiona	White	32	547
7	Paul	Atriedes	54	743

Customisations using the TablePress 'Plugin Options' form

The following custom CSS changes to TablePress tables on your website, described in this section, should be placed in the 'Plugin Options' tab of the TablePress backend, specifically in the 'Frontend Options and Styling' panel (as shown below):

Frontend Options and Styling panel in the TablePress Plugin Options tab

Set column width in your table

Tobias has already discussed this here. However, as an example, the following code sets a larger width for one column in the TablePress table shown below:

.tablepress-id-26 .column-3 {
	width: 200px;
	}

.tablepress-id-N where N represents the table ID number, in this case, 26.

.column-3 = the column number where the width will be changed. Counting starts from the leftmost column. The first column = 1

Example: Beware - As can be seen in the accompanying table, sometimes expanding one column too much can start to shift columns out of alignment with the header.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	55
3	Betty	Swan	25	343
4	Sam	Beckett	66	764

Using the shortcode to set column widths

Column widths can also be set within the shortcode of a TablePress table as discussed by Tobias.

Examples:

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	55
3	Betty	Swan	25	343
4	Sam	Beckett	66	764

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	55
3	Betty	Swan	25	343
4	Sam	Beckett	66	764

Centring the data in your table

Often it is desirable to centre the data within each cell of the table. To do this the following code should be added to the CSS text area in TablePress's Plugin Options page:

.tablepress-id-29 thead th,
.tablepress-id-29 tfoot th,
.tablepress-id-29 tbody td {
	text-align: center;
	}

.tablepress-id-N where N represents the table ID number, in this case, 29.

thead th = header row

tfoot th = footer row

tbody td = rows in the main body of the table containing the data

Example: As you can see in the accompanying table, the header row and all of the data have been centred in each of their respective table cells.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	55
3	Betty	Swan	25	343
4	Sam	Beckett	66	764

This centring behaviour can also be restricted to individual columns as shown below :

.tablepress-id-30 .column-1 {
	text-align: center;
	}

.tablepress-id-N where N represents the table ID number, in this case, 30.

.column-1 = the column number where the text will be centred. Counting starts from the leftmost column. The first column = 1

Example: As you can see in the accompanying table, only the data and the header in the first column ('Rank') have been centred.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	55
3	Betty	Swan	25	343
4	Sam	Beckett	66	764

Change the colour and font attributes of the table header and footer rows

Tobias has already discussed this here. However, as an example, the following code modifies the colour and font size of the header and footer rows in the TablePress table shown below:

.tablepress-id-10 thead th,
.tablepress-id-10 tfoot th {
	background-color: #a6e62d;
	color: #0B08B6;
	font-family: Tahoma;
	font-size: 24px;
	font-weight: bold;
	text-decoration: underline;
	}

.tablepress-id-N where N represents the table ID number, in this case, 10.

thead th = the table header row

tfoot th = the table footer row

background-color = the colour of the header / footer row backgrounds

color = the colour of the text in the header / footer row.

font-family = the font family of the text in the header / footer row.

font-size = the font size of the text in the header / footer row.

font-weight = the font-weight of the text in the header / footer row (eg. bold, normal).

text-decoration = used for adding line features to the text in the header / footer row (eg. underline, overline, line-through). In this case, the header text is underlined.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	55
3	Betty	Swan	25	343
4	Sam	Beckett	66	764

Importantly, this assumes that the first and last row of that particular table have been set in its 'Table Options' panel to be the table header and footer, respectively, as shown below:

Table Options panel emphasising the Header and Footer-enable options

Change the colour of a single row

Tobias has already discussed this here. However, as an example, the following code modifies the colour of the 3rd row in the TablePress table shown below:

.tablepress-id-9 .row-3 td {
	background-color: #335bff;
	color: #00ff00;
	}

.tablepress-id-N where N represents the table ID in this case, 9.

.row-3 td = 3 represents the row number. Counting begins from the top row (the header row) which is considered row 1.

background-color = the colour of the table cells in the coloured row

color = the colour of the text within the table cells of the coloured row

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	55
3	Betty	Swan	25	343
4	Sam	Beckett	66	764

Change the colour and font attributes of the data rows

Tobias has already discussed this here. However, as an example, the following code modifies the font, font size, font-weight and colours of the data rows in a TablePress table shown below:

.tablepress-id-23 tbody td {
	background-color: #F9F8D1;
	color: #0B08B6;
	font-family: Tahoma;
	font-size: 12px;
	font-weight: normal;
	}

.tablepress-id-N where N represents the table ID number, in this case, 23.

background-color = the background colour of the data rows.

color = the text colour of the data rows.

font-family = the font family of the text in the data rows.

font-size = the font size of the text in the data rows.

font-weight = the font-weight of the text in the data rows (eg. bold, normal).

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	55
3	Betty	Swan	25	343
4	Sam	Beckett	66	764

Change the colour used to differentiate between alternate rows

Tobias has already discussed this here. However, as an example, the following code modifies the colour used to distinguish between alternating rows in the TablePress table shown below:

.tablepress-id-11 .odd td {
	background-color: #C887FF;
	color: #500292;
	}
.tablepress-id-11 .even td {
	background-color: #500292;
	color: #C887FF;
	}

.tablepress-id-N where N represents the table ID number, in this case, 11.

.odd td = odd data rows of the table

.even td = even data rows of the table

background-color = the colour of the row backgrounds

color = the colour of the text in the rows.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	55
3	Betty	Swan	25	343
4	Sam	Beckett	66	764

This assumes that the 'background colors of consecutive rows shall alternate' option for that table has been selected in its 'Table Options' panel (as shown below) :

Table Options panel emphasising the Alternating Row Background Colours-enable option

Change the hover highlight colour of a table row

Tobias has already discussed this here. However, as an example, the following code modifies the colour used to highlight the row over which the mouse pointer is hovering as shown below:

.tablepress-id-12 .row-hover tr:hover td {
	background-color: #f1240b;
	color: #000000;
	}

.tablepress-id-N where N represents the table ID number, in this case, 12.

Example: Hovering your mouse over the accompanying table's rows will highlight each row in red.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	55
3	Betty	Swan	25	343
4	Sam	Beckett	66	764

Importantly, this assumes that the 'Highlight a row while the mouse cursor hovers above it by changing its background colour' option for that table has been selected in its 'Table Options' panel as shown below:

Table Options panel emphasising the Row Hover Highlight-enable option

Change the colour of the sorted column header

Tobias has already discussed this here. However, as an example, the following code modifies the colour of a column header in which the column has been sorted (in either ascending or descending order), or when a header of a sortable column is hovered over with the mouse pointer:

.tablepress-id-22 thead .sorting_asc,
.tablepress-id-22 thead .sorting_desc,
.tablepress-id-22 thead .sorting:hover {
	background-color: #345928;
	color: #00ff00;
	}

.tablepress-id-N where N represents the table ID number, in this case, 22.

.sorting_asc = for when the column has been sorted in ascending order.

.sorting_desc = for when the column has been sorted in descending order.

.sorting_hover = for when hovering the mouse pointer over the column header of a sortable column.

background-color = the background colour of a sorted column header.

color = the text colour of a sorted column header.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	55
3	Betty	Swan	25	343
4	Sam	Beckett	66	764

Example: Hovering your mouse over the accompanying table's header row will highlight sortable headers in green. In addition, sorting a column will also highlight that column header in green.

Highlight specific cells in your table

Tobias has already discussed this here. However, as an example, the following code highlights a specific cell in the TablePress table shown below:

.tablepress-id-24 .row-3 .column-3 {
	background-color: #FFF408;
	color: #0B08B6;
	}

.tablepress-id-N where N represents the table ID number, in this case, 24.

.row-3 = 3 represents the row number. Counting begins from the top row (the header row) which is considered row 1.

.column-3 = 3 represents the column number. Counting begins from the leftmost column which is considered column 1.

background-color = the colour of the highlighted cell.

color = the text colour of the highlighted cell.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	553
3	Betty	Swan	25	343
4	Sam	Beckett	66	764

Highlight specific cells (dynamically) in your table(s)

Tobias has already discussed this here. However, to elaborate further, specific data can be highlighted by creating a new class and then controlling the attributes of that class. To achieve this, the data to be highlighted needs to be wrapped in an HTML <span> element with a new class name and placed within the table. For example, in the table below, the name 'Swan' is wrapped in a class called 'highlight-1' and the name 'Beckett' is wrapped in the class 'highlight-2' using the following code :

<span class="highlight-1">Swan</span>
<span class="highlight-2">Beckett</span>

These new classes are placed in the table cells as shown below:

Backend of a TablePress table showing the placement of custom HTML

Although this means that you have to add extra HTML in the table wherever you want the highlighting to occur, it also means that you can control the look of that data if it appears in multiple cells within the table, or even across multiple TablePress tables, all with a few lines of CSS code similar to that shown below (this CSS code is placed in the Plugin Options' 'Frontend Styling and Options' box):

.tablepress .highlight-1 {
	color: #0C740B;
	text-decoration: underline;
	}

.tablepress .highlight-2 {
	color: #740B1D;
	font-weight: bold;
	}

.tablepress = when no ID is specified, the changes apply to all TablePress tables on your website.

.highlight-1 & .highlight-2 = represent the new classes.

color = sets the text colour of the highlighted cell.

text-decoration = controls the line features of the text in the highlighted cell (eg. underline, overline, line-through).

font-weight = controls the font-weight of the the text in the highlighted cell (eg. normal, bold).

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	553
3	Betty	Swan	25	343
4	Sam	Beckett	66	764

Example: As you can see from the table, the text in the cells with the highlighted classes have been modified.

Remove any borders from your table

Tobias has already discussed this here. However, as an example, the following code ensures the removal of all borders from the TablePress table shown below:

.tablepress-id-27,
.tablepress-id-27 tr,
.tablepress-id-27 tbody td,
.tablepress-id-27 thead th,
.tablepress-id-27 tfoot th {
	border: none !important;
	}

.tablepress-id-N where N represents the table ID number, in this case, 27.

Example: As you can see in the accompanying table, all borders have been removed from the table.

Rank	First Name	Last Name	Age	Score
1	Tom	Jones	23	909
2	Alan	Gascoigne	44	55
3	Betty	Swan	25	343
4	Sam	Beckett	66	764

Other Extensions to TablePress tables (from Tobias)

Make your table Responsive

Turning on horizontal scrolling on a TablePress table is usually enough to make the table responsive to different screen widths.

Settings panel for the DataTables JavaScript library features emphasising the Horizontal Scrolling-enable option

As shown in the example table below, which has horizontal scrolling turned on, if you reduce the width of your browser window, the table should adjust to the size of the window, increasing or decreasing the hidden area that can be horizontally scrolled into.

Rank	First Name	Last Name	Age	ID	City	Country	Height	Weight	Gender	Eye Colour	Education	Level	Score
1	Tom	Jones	23	56128991	London	United Kingdom	1.75 m	75 kg	male	blue	B.Sc.	1	909
2	Alan	Gascoigne	44	78377721	Montreal	Canada	1.85 m	86 kg	male	green	B.Sc.	2	55
3	Betty	Swan	25	16783920	Paris	France	1.60 m	60 kg	female	brown	Ph.D.	1	343
4	Sam	Beckett	66	92392874	New York	United States	1.96 m	90 kg	male	brown	M.D.	3	764

However, other techniques do exist for making a TablePress table Responsive, which have been addressed by a premium extension created by Tobias (the author of TablePress). Alternative Responsive mechanisms include flipping the data so that the columns become rows, collapsing some of the right-hand column data under each row, or stacking the data of each row in a series of columns one atop the other. The extension is available as a premium plugin, so a small donation is recommended if you use it.

Add function buttons to your table

Another extension created by the author of TablePress is the DataTables Buttons plugin. As its name suggests, when installed and initiated within the shortcode for a TablePress table, it adds specific buttons above the table. These buttons include the ability to choose which columns of the table are visible and to download all the data in the table (not just what is visible) as a .csv, Excel or PDF file, as well as print the table onto paper.

The buttons available with the TablePress Datatables Buttons extension

Buttons available with the TablePress DataTables Buttons extension (image only)

This is a premium extension so a donation to Tobias is recommended.

Make your table convert any URLs into hyperlinks automatically

Another extension created by the author of TablePress is the Automatic URL Conversion plugin. As its name suggests, when installed and initiated within the shortcode for a TablePress table, it converts any links within that table into full-blown hyperlinks without the need to add the HTML hyperlink code in the table cell itself. This can be very useful if you have a lot of linking text in your table where adding lots of extra HTML will just make it difficult to manage.

TablePress backend

TablePress frontend showing how website addresses are automatically converted to functional hyperlinks

...resulting TablePress frontend

Fix the header row in place when scrolling through your table

Another extension created by the author of TablePress is the DataTables FixedHeader plugin. As its name suggests, when installed and initiated within the shortcode for a TablePress table, it fixes the table header at the top of the screen as you scroll down the page over the table. Once you scroll past the bottom of the table, the fixed header then scrolls away. For a working example, see Tobias' page for the plugin.

Caveat: This extension works well as long as your table does not need to use horizontal scrolling or act Responsively. The fixed header cannot horizontally scroll with the table so the data in the columns tend to go out of alignment with the header if you scroll to the right. In such a situation, it is better to use the DataTables Library vertical scrolling modification (described earlier on this page) which allows you to fix the header only as you vertically scroll down the table rather than scroll down the page.

Add column filter boxes to your table

Another extension created by the author of TablePress is the DataTables Column Filter plugin. As its name suggests, when installed and initiated within the shortcode for a TablePress table, it adds filtering boxes to the footer of the table. Each box filters the column above it with whatever text you type in.

TablePress table using the DataTables Column Filter extension

(image only)

Caveat: Depending on your WordPress theme, the filter boxes can induce unwanted changes to the styling of your table. In the above case (image only), the boxes have stretched the horizontal space of each column making them much wider than they need to be.

Add column filter drop-down menus to your table

Another extension created by the author of TablePress is the DataTables Column Filter Widgets plugin. This is similar to the Column Filter extension described above, but instead of filter boxes at the bottom of each column, you get filter drop-down menus above the table which contain all the unique entries from the column each menu represents.

TablePress table using the DataTables Column Filter Widgets extension

(image only)

Caveat: If you have a lot of columns, the number of drop-down menus can become cumbersome as is the case with the above example (image only). Also, if you have placed any HTML inside your table cells, this can create some unwanted artefacts in the drop-down menu performance.

Make the 1st column in your table a row counter

Another extension created by the author of TablePress is the DataTables Counter Column plugin. This extension allows you to force the first column to become a counter column that remains unchanged even when sorting the adjacent columns.

Before sorting

TablePress table using the DataTables Counter Column extension after sorting

After sorting - notice how the 1st column remains unchanged

Caution: When the DataTables Counter Column extension is active, the entries in the first column are replaced with an ascending series of numbers starting at 1 and incrementing by 1 with each row. As a result, any data entered into the first column of the TablePress backend will be ignored and will not appear in the frontend render of the table.

Other TablePress extensions that did not work properly for me

There are some extensions created by the author of TablePress that I have either not been able to get to work for me or they introduce some sort of incorrect artefact to the table. This appears to be mostly WordPress theme-related, so they may still be worth trying with your website's particular theme. The extensions I have not got to work or did not work properly for me include the following:

How to Customise Tables in TablePress

Customisations using the DataTables JavaScript Library

Add vertical scrolling to your table

Choose which column(s) of your table should NOT be searchable

Choose which column(s) of your table should NOT be sortable

Set the default ordering column in your table when it loads

Premium Extension

Choose the sorting options for column(s) in your table

Control the appearance of the pagination menu

Control the appearance of the length menu

Premium Extension

Save the state of your table for when a user re-visits the page

Customisations using the TablePress 'Plugin Options' form

Set column width in your table

Using the shortcode to set column widths

Centring the data in your table

Change the colour and font attributes of the table header and footer rows

Change the colour of a single row

Change the colour and font attributes of the data rows

Change the colour used to differentiate between alternate rows

Change the hover highlight colour of a table row

Change the colour of the sorted column header

Highlight specific cells in your table

Highlight specific cells (dynamically) in your table(s)

Remove any borders from your table

Other Extensions to TablePress tables (from Tobias)

Make your table Responsive

Add function buttons to your table

Make your table convert any URLs into hyperlinks automatically

Fix the header row in place when scrolling through your table

Add column filter boxes to your table

Add column filter drop-down menus to your table

Make the 1st column in your table a row counter

Other TablePress extensions that did not work properly for me

Make your own application to convert images to the webp format

Using WP-CLI to manage multiple MAMP websites

Using WP Migrate DB Pro to Publish Your Content

Review: Reference Tracker

Schedule Your Work With Cronnix

Review: Remote Rocks And Rolls