Back to Community
Home / Community / Plugin → Tablepress – tables in wordpress made easy

How to Find the Correct TablePress ID for Your JavaScript or CSS

16 threads Sep 16, 2025 Plugin → Tablepress – tables in wordpress made easy

Content

If you've ever tried to use JavaScript's getElementById() or CSS to style a specific TablePress table, you might have run into a confusing issue: the HTML ID of your table seems to change unexpectedly. This can break your custom scripts and styles. This guide explains why this happens and how to reliably target your tables every time.

Why Does My Table's HTML ID Change?

TablePress generates an HTML ID for each table to make it unique on the page. Normally, this ID follows the pattern tablepress-{ID} (e.g., tablepress-4).

However, if the function that renders the table is called more than once on the same page load, TablePress will automatically append a suffix like -no-2 to prevent duplicate IDs in the HTML. This results in an ID like tablepress-4-no-2. This is a standard and necessary practice to ensure valid HTML, where element IDs must be unique.

This behavior can be triggered by certain themes, other plugins, or specific caching mechanisms that cause the table to be processed multiple times.

The Solution: How to Find the Correct, Stable ID

You should not hardcode an ID that includes the -no-2 suffix, as it is not guaranteed to be stable. Instead, you must inspect your live page to see what ID the table actually has when it is rendered.

  1. View the Page Source: Navigate to the page containing your table in a web browser.
  2. Open the HTML Source Code: Right-click on the page and select "View Page Source" (the exact wording may differ by browser).
  3. Search for Your Table: Press Ctrl+F (or Cmd+F on Mac) to open the search box and search for <table. This will highlight all the HTML <table> elements in the source.
  4. Identify the Correct ID: Look for the table with a class attribute that contains tablepress-id-{ID}. The id attribute of this same <table> tag is the exact, correct ID you must use in your getElementById() function or CSS selector. This is the only ID guaranteed to be correct for that specific page load.

Example:
If you find <table id="tablepress-4-no-2" class="tablepress tablepress-id-4">, then your JavaScript should use:
document.getElementById("tablepress-4-no-2");

Best Practice for Reliable Code

While inspecting the source gives you the correct ID for that moment, a more robust long-term solution is to use a different method to target your table that doesn't rely on the full, potentially changing ID.

You can use the stable class attribute that TablePress assigns, which always contains tablepress-id-{ID} without the -no-2 suffix. You can use this class in a CSS selector or a more complex JavaScript query.

CSS Example:
To style the table with ID 4, you could use:
.tablepress-id-4 { /* your styles here */ }

JavaScript Example (using jQuery):
$('.tablepress-id-4').doSomething();

JavaScript Example (vanilla JS):
document.querySelector('.tablepress-id-4');

By using the class-based selector, your code becomes more resilient to changes in the full HTML ID, ensuring your scripts and styles continue to work correctly.

Related Support Threads Support