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

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

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.

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

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.

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.

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.

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

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.

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

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

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.