Frequently Asked Questions (FAQ)

This page lists answers to often asked questions about TablePress. Using these answers does usually not require programming or coding experience. For more technical questions, please also refer to the documentation.

Please look through these questions, before asking for support. Thanks!

General

Migration from WP-Table Reloaded

For more information on how to easily switch from WP-Table Reloaded to TablePress, please read the migration guide.

Styling, Layout, and CSS

How and where do I add “Custom CSS” code?

To add CSS commands (Cascading Style Sheets), just go to the “Custom CSS” textarea 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).

How can I change the background color of a single row?

Changing 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;
}

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.

This just needs to be entered into the “Custom CSS” textfield on the “Plugin Options” page.

How can I change the background color of the table head row?

This can be done with the following CSS code (that just needs to be added to the “Custom CSS” textarea in the “Plugin Options”):

.tablepress thead th,
.tablepress tfoot th {
	background-color: #ff0000;
}

To also change the hover color when sorting, and the background color of the column that is currently sorted, add

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

How can I change the color used for marking alternating rows?

This can be done with the following CSS code (that just needs to be added to the “Custom CSS” textarea in the “Plugin Options”):

.tablepress .odd td {
	background-color: #ff0000;
}
.tablepress .even td {
	background-color: #00ff00;
}

You can change the color of odd and even rows, but generally you will only need to change the color of odd rows. 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.

How can I change the color used for highlighting hovered rows?

This can be done with the following CSS code (that just needs to be added to the “Custom CSS” textarea in the “Plugin Options”):

.tablepress .row-hover tr:hover td {
	background-color: #ff0000;
}

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.

How can I change the font, font size and font color of a table?

This can be done with the following CSS code (that just needs to be added to the “Custom CSS” textarea in the “Plugin Options”):

.tablepress-id-N tbody td {
	font-family: Tahoma;
	font-size: 14px;
	color: #ff0000;
}

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 tables). The values for font-family, font-size and color can of course be adjusted or removed, if they are not needed.

How can I highlight certain cells or their content?

If you know the row and column numbers of the value in question, you could use CSS like this:

.tablepress-id-N .row-X .column-Y {
	background-color: #ff0000;
}

(where N (the table’s ID), X (the number of the row), and Y (the number of the column) obviously 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="hilite">your important value</span>

and could create approriate CSS like

.tablepress .hilite {
	color: #ff0000;
}

How can I set column widths?

This can be done with the following CSS code (that just needs to be added to the “Custom CSS” textarea in the “Plugin Options”):

.tablepress-id-N .column-2 {
	width: 100px;
}

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 tables).
This is the general pattern I recommend. You can use this as often as needed, changing the column in question to the correct number each time.

Note: In most cases, it is not necessary to set the column widths directly! Instead, you will 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-N .column-2 {
	padding: 4px;
}

which again needs to be adjusted as above.

How do I center a table on the page?

This can be done with the following CSS code (that just needs to be added to the “Custom CSS” textarea in the “Plugin Options”):

.tablepress-id-N {
	width: auto;
	margin: 0 auto 1em;
}

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

How do I remove the borders from a table?

This can be done with the following CSS code (that just needs to be added to the “Custom CSS” textarea in the “Plugin Options”):

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

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 at once).

What CSS selectors are available?

The most important selector should be .tablepress which applies to all tables generated by the plugin. 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 a cell, so the CSS command will look like this:

.tablepress-id-N tbody td {
	property1: value1;
	property2: value2;
}

(property1 and property2 are just for demonstration and need to be changed to the CSS property that you want to change.)

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

Troubleshooting

Tables are corrupted and show “[ERROR] TABLE IS CORRUPTED”

When this error occurs, this usually means that there’s another plugin interfering with the table saving mechanism in TablePress (by hooking into the internal WordPress post saving functions). In most cases, this only affects tables with quotation marks " in the cells (e.g. as part of HTML code).

Unfortunately, this can not be fixed in TablePress, but must be fixed in the plugin that is causing this. The first step therefore is to find that plugin.
To do that, please deactivate all plugins, except TablePress, one by one. Each time, check if a newly added and edited table (that should contain quotation marks "!) still gets corrupted. Once the problem disappears, you have found the plugin that causes this problem.
One plugin that is known for this is “Outbound Link Manager”.

Once you have found the faulty plugin, you should leave that plugin deactivated, at least while you edit tables. Additionally, you should contact the developer of that plugin, and ask him to stop using the PHP function stripslashes on the entire $_POST array (which usually causes this). Also, it would be nice if you could notify me about your findings, via the WordPress Support Forums.

The next step would then be to restore the corrupted table. If it’s just a very small table, you could just re-create it from scratch. Otherwise, it’s the easiest to import it again from a file, if you have one. If you don’t, we can try to restore it from an old revision of the table, which could still exist in the database.
For that, please contact me directly via email (wordpressno-spam@mailtobias.baethge.com) with the details to a temporary admin account to your site. I’ll then assist in restoring the table.

Sorting or other JS functions are not working

If the “Use DataTables” checkbox is checked on a table’s “Edit” screen, but functions like sorting, search, or pagination are not showing up, this usually indicates a JavaScript problem.

The most common reason for this is an old and outdated version of the jQuery JavaScript library, that some themes or plugins load — although WordPress already ships with the correct and up-to-date version.
To check for this, please search the generated HTML source of the page with the table (accessible via the “View Source” feature in the 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 type="text/javascript" src="<?php bloginfo('template_url');?>/js/jquery.js"></script>

from the theme’s “header.php” file.

Another reason for this issue could be a broken script by another plugin. To check for that, please use the built-in “Developer Tools” of your browser. Right click your page and pick “Inspect Element” (in Chrome, Firefox, and Opera) or press the F12 key (in Internet Explorer). You should then see the “Developer Tools”, where you can switch to the “Console” tab to see JavaScript problems on the page. Each error should have a filename next to it, from which you can extract the name of the plugin that has the error. Then, try loading the page again after temporarily deactivating that plugin in WordPress.

Top