View Categories

Manual styling

Manual styling and fine tuning is available for all styling types, free and premium, and can be used to overwrite and improve the css of a data table. Below are some styling examples. Please scroll down for a more detailed explaination of the data table structure, elements and selectors. A video tutorial “how to add custom css to a WordPress site” is available at the end of this page for users who are new to css styling with WordPress.

Examples #

Change font size for all data tables

.dataTables_wrapper { font-size: 14px; }

Change font size for a specific data table (id = 7, table name = customer)

#customer7_wrapper { font-size: 12px; }

Change font weight and color for column student_lastname

th.student_lastname, td.student_lastname {
	font-weight: 900;
	color: green;
}

Change alignment for numeric column salary (id = 8, table name = employee)

#employee8_wrapper th.salary, td.salary { text-align: right; }

Structure #

To style or fine tune data tables or specific data table elements, we first need to know the structure of a data table. The following image shows all free and premium elements a data table can have.

Elements #

  1. Search Builder (premium)
  2. Search Panes (premium)
  3. Export and display buttons (premium)
  4. Page length
  5. Search box
  6. Processing text (only visible when a query is actually performed)
  7. Table
  8. Summary
  9. Pagination
Styling elements requires us to know the selectors for each element.

Selectors #

All data table elements are accessible through their classes. Most can also be accessed through their unique ID. The ID selector allows unique styling per data table. The ID is prefixed with the table name, id and an underscore.

Element ID Class
Publication table1_wrapper dataTables_wrapper
Search Builder dtsb-searchBuilder
Search Panes dtsp-panesContainer
Buttons dt-buttons
Page length table1_length dataTables_length
Search box table1_filter dataTables_filter
Processing text table1_processing dataTables_processing
Table table1 wpda-datatable dataTable
Summary table1_info dataTables_info
Pagination table1_paginate dataTables_paginate
Each table cell belongs to a certain table column. The column name is added to the cell as a class. This allows us to style each column separately.

Please use the inspector to examine data table element details for fine tuning.

Don’t know how to add custom CSS to your WordPress theme? #

It’s easy to learn in just a few minutes! Watch the video below…