Every table gets certain CSS classes and an HTML ID that can be used for styling. Add your styling commands to the “Custom CSS” textarea on the “Plugin Options” screen.

There are examples for common styling tasks on the FAQ page.

CSS classes are attached as <element class="class-name">...</element> to an <element>, IDs are attached as <element id="html-id">...</element>.

CSS classes

.class {
	/* your CSS */ 
}Code language: CSS (css)

tablepress (class of <table>)

Every table has this class.

tablepress-id-<ID> (class of <table>)

Every table has this class (with its ID for <ID>).

row-<number> (class of <tr>)

Every row gets this. <number> is the number of the row displayed, no matter if it is a heading row or data row. Counting always starts at 1.

column-<number> (class of every <th> or <td>)

<number> is the number of the column the cell belongs to. It will be a class of every <th> and <td> element.
Use this for styling column widths!
Example:

.tablepress .column-2 { 
	width: 200px; 
}

There’s another example in the FAQ. Important: If you use both the .column-X and the .row-X selectors at the same time, the .row-X has to stand before the .column-X (because it is given to the <tr> which encloses the <td>).

odd and even (classes of every <tr>)

If the Table Option “Alternating row colors” (or the Shortcode parameter) is enabled, every row will get one of these classes, depending on whether it is an odd or even row. Use the classes to actually style the alternating background colors. There’s an example to do this in the FAQ

tablepress-table-name (classes of <h2>)

If the Table Option “Print Table Name” is enabled, the Name of the Table will be printed above or below the table inside a <h2> HTML tag, which has this class.

tablepress-table-description (classes of <span>)

If the Table Option “Print Table Description” is enabled, the Description of the Table will be printed above or below the table inside a <span> HTML tag, which has this class.

CSS/HTML IDs

#html-id {
	/* your CSS */ 
}Code language: CSS (css)

tablepress-<ID>-no-<number> (ID of <table>)

Every table gets an ID like this. <ID> stands for the ID used in the “All Tables” list of TablePress. <number> is the count/occurrence of that table on the page up to this point. (For example, if you display the same table (with the same <ID>) twice on your site (e.g. once in a post and the second time in the sidebar), the first one will have no -no-... and the second one will have <number> = 2. This means, that these HTML IDs are not very reliable to be used for styling, as they might change depending on the occurrence of the same table on the page again. These IDs are used to invoke the JavaScript library’s calls (if activated for this occurrence of the table).