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.
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 »
This online style builder will let you customise the colouring of the DataTables stylesheet to fit in seamlessly with your web-site or app. The created stylesheet still provides the class feature selection abilities of the default stylesheet, so your table matches what you need exactly. Read more »
ThemeForest is a site where HTML/CSS authors can publish their work as reusable templates that you can purchase and use on your site to very quickly and easily create a complex site with a unified style. This is a collection of some of the themes which use DataTables. Read more »
Bootstrap 3 is a CSS framework that lets you quickly and easily build a user interface that has a unified look and feel. DataTables as the ability to be styled through any CSS framework allows us to provide direct integration with Bootstrap for DataTables to get beautiful tables very easily. Read more »
Bootstrap 4 is a stolid CSS framework that lets you quickly and easily build a user interface that has a unified look and feel. DataTables offers full integration with Bootstrap 4. Read more »
Bootstrap 5 is the next generation of the stolid CSS framework that lets you quickly and easily build a user interface that has a unified look and feel. DataTables offers full integration with Bootstrap 5. Read more »
Bulma is an emerging CSS framework that is quickly gaining popularity. DataTables offers full integration with Bulma. Read more »
Foundation from Zurb is a CSS framework that allows rapid development of complex sites, featuring a mobile first approach to the design process for HTML pages. With Foundation you can create beautiful, complex and customisable sites / apps very quickly, and with the DataTables integration for Foundation your tables will have all of the options DataTables provides as well. Read more »