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.
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:

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
"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:

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
}]
NB: first column = 0 when using the DataTables library
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):

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" ]
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" ]
}]
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"
"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):

Control the appearance of the 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"]]
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):

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
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):


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:

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) :

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:

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:

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.

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.

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

...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.

(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.

(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

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: