Styling
It is important to style the DataTables enhanced tables in a manner which suits your design, so the tables fit in seamlessly with the rest of your site / app. To this end, DataTables provides a number of options for styling the tables, from the default DataTables stylesheet which has a number of built-in optional features, to integration with some of the most widely used CSS frameworks available.
This section in the documentation details how the look and feel of DataTables can very quickly and easily be changed to suit your needs.
Styling sections
Default styling options
The default DataTables stylesheet presents a number of different features which you can optionally enable by assigning different class names to your HTML tables, such as row or cell bordering, striped rows and hover row highlighting. The most common set of options can be enabled simply by using the display class, but any combination can be used. Read more »
Dark mode
With many users preferring "dark mode" in their operating system preferences, web-sites are increasingly offering light and dark modes. DataTables has full support for dark mode in its default styling, Bootstrap 5.3+ and Bulma 1+. Read more »
Styling frameworks
When creating a web site or application, you will want all of the UI components to look and feel the same, to provide an integrated and consistent interface for the end user. There are many styling frameworks available that provide the building blocks for building such interfaces, and DataTables provides full integration with many of the most popular frameworks. Read more »
Kits
Many UI "template kits" choose to utalise DataTables and fully integrate our software into their templates to enhance the table options they provide. A template kit can form building blocks for your web-site / app, to let you very quickly and easily create a complex site with a unified style. This is a collection of some of the kits which use DataTables. Read more »