Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jakaria-istauk/tablentor/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

While all styling can be done within Elementor’s Style tab, you can also target Tablentor’s output classes with custom CSS for advanced scenarios — such as alternating row colors, per-instance overrides, or styles that depend on pseudo-selectors not exposed in the panel.
In Elementor, use the Advanced tab on a widget to add custom CSS classes. You can then target those classes in your theme’s Custom CSS or a plugin like Simple Custom CSS.

​
Basic Table classes

ClassElementDescription
.ct-basic-table-containerOuter wrapper <div>Contains both the search input and the table. Each instance has a unique id="tablentor-bt-{widget-id}".
.ct-basic-table<table> elementThe table itself.
.tablentor-bt-searchSearch wrapper <div>Flex container holding the search input. Visible only when Enable Search is on.
.tablentor-bt-search-input<input> elementThe search text field.

​
Example CSS

/* Style the search input for a specific widget instance */
#tablentor-bt-abc123 .tablentor-bt-search-input {
  border-color: #94cb04;
  border-radius: 4px;
}

/* Alternating row colors */
.ct-basic-table tr:nth-child(even) td {
  background-color: #f9f9f9;
}

​
CSV Table classes

​
Plugin-generated classes

ClassElementDescription
.tablentor-table-csv-containerOuter wrapper <div>Contains the DataTables wrapper and table. Has id="tablentor-table-csv-{widget-id}".
.tablentor-table-csv<table> elementThe CSV table. DataTables is initialized on this element.
.no-data-tableAdded to the wrapperApplied when Enable Data Table is off.
.hide-table-headingAdded to the wrapperApplied when neither Search Input nor Pagination is shown.
.hide-table-lengthAdded to the wrapper (editor only)Applied in the Elementor editor when Entries Per Page is hidden.

​
DataTables-generated classes

These classes are written by the DataTables library and follow the standard DataTables DOM structure.
ClassDescription
.dt-searchDataTables search container
.dt-inputDataTables input fields (search and length dropdown)
.dt-lengthEntries-per-page container
.dt-infoPaging info text (e.g., “Showing 1 to 10 of 50 entries”)
.dt-pagingPagination container
.dt-paging-buttonIndividual pagination buttons
Tablentor styles are enqueued on the frontend only when the widget is present on the page, using wp_enqueue_style with the handles tablentor-data-table and tablentor-table-csv.

​
Example CSS

/* Alternate row colors in a CSV table */
.tablentor-table-csv tbody tr:nth-child(even) td {
  background-color: #f5f5f5;
}

/* Highlight the active pagination button */
.tablentor-table-csv-container .dt-paging .dt-paging-button.current {
  background: #94cb04 !important;
  color: #fff !important;
}

Build docs developers (and LLMs) love

Get started for freeTalk to us