To add CSS commands (Cascading Style Sheets), just go to the “Custom CSS” text area on the “Plugin Options” screen of TablePress and enter them there. They will override the default styling, so that you do not have to change any files directly (such modifications would be lost after each TablePress update).

Please note that you must not add the CSS code to the “Custom Commands” text field on the table’s “Edit” screen. That field is used for a different type of code.

Changing the text and the background color of a single row, e.g. to highlight it, can be done with some CSS like this:

.tablepress-id-N .row-X td {
	background-color: #ff0000;
	color: #00ff00;
}Code language: CSS (css)

where N (the table’s ID), and X (the number of the row) need to be adjusted to your table! #ff0000 is the HEX color code of the desired color, in this case red. You can change both the text color (via the color property) and the background color (via the background-color property).

This CSS code needs to be entered into the “Custom CSS” text field on the “Plugin Options” page of TablePress.

This can be done with the some CSS code that needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress {
	--head-text-color: #111111;
	--head-bg-color: #d9edf7;
	--head-active-text-color: #111111;
	--head-active-bg-color: #049cdb;
}Code language: CSS (css)

Here, the lines starting with -- indicate variables for the colors, with text being the text color and bg denoting the background color, of the table head and footer rows. The lines of code with active in the variable name indicate the colors of hovered header cells and the colors of header cells that are currently sorted. Just change the HEX color values as desired. You only need to specify the lines that you want to change.

If you prefer a visual interface for changing colors, check out the Default Style Customizer feature that is part of the TablePress premium license plans.

If you just want to change this for a specific table, use .tablepress-id-N (with N being the table’s ID) as the selector, instead of .tablepress.

If the CSS code from above does not work, you can also try this alternative CSS code:

.tablepress thead th,
.tablepress tfoot th {
	background-color: #ff0000;
	color: #00ff00;
}
.tablepress thead .sorting_asc,
.tablepress thead .sorting_desc,
.tablepress thead .sorting:hover {
	background-color: #00ff00;
	color: #00ff00;
}Code language: CSS (css)

You can change both the text color (via the color property) and the background color (via the background-color property).

This can be done with the some CSS code that needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress {
	--odd-text-color: #111111;
	--odd-bg-color: #f9f9f9;
	--even-text-color: #111111;
	--even-bg-color: #ffffff;
}Code language: CSS (css)

Here, the lines starting with -- indicate variables for the colors, with text being the text color and bg denoting the background color, either for odd or even rows. Just change the HEX color values as desired. You only need to specify the lines that you want to change.

If you prefer a visual interface for changing colors, check out the Default Style Customizer feature that is part of the TablePress premium license plans.

If you just want to change this for a specific table, use .tablepress-id-N (with N being the table’s ID) as the selector, instead of .tablepress.

If the CSS code from above does not work, you can also try this alternative CSS code:

.tablepress > :where(tbody.row-striping) > :nth-child(odd) {
	background-color: #ff0000;
	color: #00ff00;
}
.tablepress > :where(tbody.row-striping) > :nth-child(even) {
	background-color: #00ff00;
	color: #0000ff;
}Code language: CSS (css)

You can change both the text colors (via the color property) and the background colors (via the background-color property) of odd and even rows.

This can be done with the some CSS code that needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress {
	--hover-text-color: #111111;
	--hover-bg-color: #f3f3f3;
}Code language: CSS (css)

Here, the lines starting with -- indicate variables for the colors, with text being the text color and bg denoting the background color, for the currently hovered row. Just change the HEX color values as desired. You only need to specify the lines that you want to change.

If you prefer a visual interface for changing colors, check out the Default Style Customizer feature that is part of the TablePress premium license plans.

If you just want to change this for a specific table, use .tablepress-id-N (with N being the table’s ID) as the selector, instead of .tablepress.

If the CSS code from above does not work, you can also try this alternative CSS code:

.tablepress .row-hover tr:hover td {
	background-color: #ff0000;
	color: #00ff00;
}Code language: CSS (css)

You can change both the text color (via the color property) and the background color (via the background-color property).

This can be done with the some CSS code that needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-N tbody td {
	font-family: Tahoma;
	font-size: 14px;
	font-weight: bold;
	color: #ff0000;
}Code language: CSS (css)

The N needs to be changed to the ID of the table in question (or use .tablepress as the first part of the selector to have this code apply to all TablePress tables on the site). The values for font-family, font-size, font-weight and color can of course be adjusted or removed, if they are not needed.

If you prefer a visual interface for changing colors, check out the Default Style Customizer feature that is part of the TablePress premium license plans.

If you know the row and column numbers of the value in question, you could use CSS code in the “Custom CSS” textarea on the “Plugin Options” screen of TablePress like

.tablepress-id-N .row-X .column-Y {
	background-color: #ff0000;
	color: #ff0000;
}Code language: CSS (css)

where N (the table’s ID), X (the number of the row), and Y (the number of the column) need to be adjusted to your table.

If you don’t know the row and column numbers (or they sometimes change, or you have more than on value to highlight), I recommend creating a new CSS class for a HTML <span> element. You would then wrap the value in the span tag, like

<span class="highlight-1">your first important value</span>
<span class="highlight-2">your second important value</span>Code language: HTML, XML (xml)

and could create approriate CSS like

.tablepress .highlight-1 {
	color: #ff0000;
	text-decoration: underline;
}
.tablepress .highlight-2 {
	color: #00ff00;
	font-weight: bold;
}Code language: CSS (css)

Here, highlight-1 and highlight-2 are just examples for possible CSS class names. You can adjust these to give their names a meaning, but have to be consistent in HTML and CSS code.

If you would like to changing the styling of rows or cells automatically, based on their content, check out the Row Highlighting and Column Highlighting features that are part of the TablePress premium license plans.

Setting column widths for your tables is possible with a short piece CSS code that just needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-7 .column-2 {
	width: 100px;
}Code language: CSS (css)

This example would set the column width of the second column of the table with ID 7 to 100 pixels. Adjust these numbers as needed.

This is the general pattern that I recommend. You can use this as often as needed, changing the column in question to the correct number each time. If you want to set multiple columns to the same width, follow the pattern

.tablepress-id-7 .column-2,
.tablepress-id-7 .column-4,
.tablepress-id-7 .column-8 {
	width: 150px;
}Code language: CSS (css)

Note: In most cases, it is not necessary to set the column widths directly! Instead, you might want to reduce the padding (the white space between the text in a cell and the edges of a cell), with the CSS code

.tablepress-id-7 {
	--padding: 4px;
}Code language: CSS (css)

which again needs to be adjusted as above.

To apply such a change to all tables on your site, use .tablepress as the first part of the selector, instead of .tablepress-id-7.

Please keep in mind that it will not always be possible to reduce the width of a table column, as by default the longest single word or other content in a column defines that column’s minimum width. You might therefore have to employ a solution to make your table “responsive”, e.g. by using the Responsive Tables feature module that is available in TablePress Premium plans, especially on smaller screens, like phones and tables.

When trying to increase the width of a column, you will need slightly extended CSS code, if that table already uses a width that is bigger than the available content area and therefore uses horizontal scrolling:

.tablepress-id-7 .column-2,
.tablepress-id-7 .column-4,
.tablepress-id-7 .column-8 {
	width: 250px;
	min-width: 250px;
}Code language: CSS (css)

By defining the minimum width as well, the browser will make the column wider even though the table already uses horizontal scrolling.

Normally, tables extend to the full width of the container element they are added to. Sometimes, for tables with few columns, it might however look better to reduce the table’s width and center it on the page. This can be done with the some CSS code that needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-N {
	width: auto;
	margin: 0 auto 1em;
}Code language: CSS (css)

The N needs to be changed to the ID of the table in question (or use .tablepress as the first part of the selector, if you want this to apply to all TablePress tables on your site).

This can be done with the some CSS code that just needs to be added to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.tablepress-id-N,
.tablepress-id-N tr,
.tablepress-id-N tbody td,
.tablepress-id-N thead th,
.tablepress-id-N tfoot th {
	border: none;
}Code language: CSS (css)

In this code, the N needs to be changed to the ID of the table in question (or use .tablepress as the first part of the selector (five times) to remove the border from all TablePress tables on your site).

If you are still seeing border lines in your table after adding this code, it might be necessary to raise the priority of this command above the commands from e.g. your theme. For that, please change the line with the CSS property to

border: none !important;Code language: CSS (css)

The most important CSS selector is .tablepress as it applies to all TablePress tables on your site. If you don’t want to apply a styling setting to all tables, but just to certain ones, you can use .tablepress-id-N, where N is the ID of the table.

In most cases you’ll want to style table body cells, so the CSS command will look like this:

.tablepress-id-N tbody td {
	property1: value1;
	property2: value2;
}Code language: CSS (css)

Here, N has to be changed to the table’s ID, whereas property1 and property2 are just for demonstration and need to be changed to the CSS properties that you want to change.

You can find a more thorough list of available CSS selectors in the Documentation.

If you can not see the TablePress entry in the left-hand side admin menu of your WordPress Dashboard, there is usually a small problem with the TablePress access rights and capabilities. This can sometimes happen during installation or if user access rights and user roles are edited later, e.g. by another plugin.

To restore the TablePress menu entry, you can try to reset the access capabilities. For that, please:

1. Go to https://example.com/wp-admin/options.php in your browser, with your site’s URL instead of example.com. On this “All Settings” screen, you should see a list of internal WordPress configuration data, the so-called “WordPress Options”, with input fields to change their values. Be advised that this is a powerful tool, so please proceed with caution.
2. Scroll down to the tablepress_plugin_options option. (To reach it quicker, you could also use the browser search function, by typing Ctrl/Cmd+F.)
3. In the text field next to tablepress_plugin_options, find the text "plugin_options_db_version":. Right after that, there should be a number like 96. (The exact number depends on the TablePress version and doesn’t matter here.)
4. Change that number to 0 (zero), but please be very careful to not remove the surrounding quotation marks or other characters!
5. Scroll down to the bottom of the page and click the “Save Changes” button.

This process should reset the internal TablePress access capabilities, and you should be seeing the TablePress entry in the admin menu again.

Note that the number after "plugin_options_db_version": that you changed to 0 will have changed back to its original value again, which is the correct and expected behavior.

If this process did not restore the TablePress menu entry, please contact us directly via email (supportno-spam@mailtablepress.org) with the details to a temporary admin account to your site. We’ll then gladly take a direct look at this issue on your site.

When saving tables or other configuration changes, it is possible that you are getting error messages, due to some problem on the server. These errors usually indicate that the server configuration needs to be adjusted. This page lists some common error messages and possible ways to solve them.

define( 'WP_MEMORY_LIMIT', '1024M' );Code language: PHP (php)

/* That's all, stop editing! Happy publishing. */Code language: plaintext (plaintext)

memory_limit = 64M ; Maximum amount of memory a script may consume (64MB)Code language: plaintext (plaintext)

php_value memory_limit 1024MCode language: plaintext (plaintext)

If the “Enable Visitor Features” checkbox is checked on a table’s “Edit” screen, but functions like sorting, search, pagination, or from TablePress Premium modules are not working in your tables, this usually indicates a JavaScript problem.

To check for that, please use the built-in “Developer Tools” of your browser. Right click your page and pick “Inspect Element”. You should then see the “Developer Tools”, where you can switch to the “Console” tab to see JavaScript problems on the page.

Depending on the shown error messages, we can then narrow down the cause. Here’s a list of common possible error messages and their causes:

Error: Uncaught TypeError: Cannot read property 'mData' of undefined

This error message indicates a problem with the table structure. The DataTables JavaScript library requires that the table has a rectangular structure, which means that every row must have the same number of cells. Unfortunately, this means that it is not possible to use both the JavaScript features and cell merging/combining, using the #colspan# or #rowspan# keywords, at the same time. You will have to decide what’s more important for your table: Using the JavaScript features or combining cells. Having both for one table is not possible.

If you are not using the #colspan# or #rowspan# keywords in the affected table, chances are high that the HTML code in your table is broken somewhere. A visual indicator for this can be that content or cells in the table are shifted, e.g. they are shown on the left of the other cells in the same column. Very often, this happens when using HTML code for a link in the table. It is very important that e.g. quotation marks " are used properly around the values of HTML tag attributes, e.g. around the URL after the href= attribute. Please check that this is the case for all HTML tags in your table.

Error: Uncaught ReferenceError: jQuery is not defined

A common reason for this error message is the use of plugins that minify, concatenate, or try to optimize the loading of JavaScript or CSS files on your site. Due to the large variety of plugins, these sometimes can not properly maintain script dependencies or the necessary loading order of files. If you see this error, you should therefore try again after temporarily deactivating any such JavaScript/CSS optimization plugins.

Another reason for this is error could be that an old and outdated version of the jQuery JavaScript library is loaded on your site. There are some themes and plugins that still do this, even though WordPress already ships with the correct and up-to-date version of jQuery. To check for this, please search the generated HTML source code of the page with the table (accessible via the “View Source” feature in your browser) for the string jquery. If there’s more than one result within HTML <script> tags, this means that the library is loaded multiple times. If that is the case, the loading of the old versions should be stopped, so that only the version that comes with WordPress is loaded. This usually means deleting a line similar to

<script src="/js/jquery.js">Code language: HTML, XML (xml)

from the theme’s “header.php” file. Other variants are lines like

wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', ... );Code language: PHP (php)

in the “functions.php” file.

No or other error messages

If you don’t see any JavaScript errors, please make sure that the “Enable Visitor Features” checkbox is really checked on the table’s “Edit” screen. Please also check if the JavaScript code that loads and initializes the DataTables JavaScript library is part of the generated HTML source code of the page. To check for this, please search that source code (again accessible via the “View Source” feature in your browser) for e.g. datatable.

If you are seeing other error messages than those from above, or if you are seeing other unexpected behavior of the JavaScript library, please open a new topic in the TablePress support forums, and make sure to include a link to the page with the table where this error happens!

If you are still using the outdated and discontinued plugin WP-Table Reloaded on your website, it is strongly recommend to switch to its official successor TablePress. WP-Table Reloaded has been discontinued in 2013 and will no longer receive any updates or support.

Please follow the migration guide to switch from WP-Table Reloaded to TablePress.