Frequently Asked Questions (FAQ)

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 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 tr > *,
.tablepress tfoot tr > * {
	background-color: #ff0000 !important;
	color: #00ff00 !important;
}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 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 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).