FAQ Category: Styling, Layout, and CSS

  • What CSS selectors are available?

    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…

  • How do I remove the borders from a table?

    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: 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…

  • How do I center a table on the page?

    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”…

  • How can I set column widths?

    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: This example would set the column width of the second column of the table with ID 7 to 100 pixels. Adjust these numbers…

  • 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 code in the “Custom CSS” textarea on the “Plugin Options” screen of TablePress like 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…

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

    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: 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…

  • How can I change the colors used for marking alternating 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: 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.…

  • How can I change the color used for highlighting hovered 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: 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…

  • How can I change the colors of the table head row?

    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: 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…

  • How can I change the colors of a single row?

    Changing the text and the background color of a single row, e.g. to highlight it, can be done with some CSS like this: 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…