Default styling options

Styling your tables to fit perfectly into your site / application, is important to ensure a seamless interface for your end users. The DataTables stylesheet provides a base set of styles to position elements such as the search input box, pagination control etc, but it also has a number of features which can be optionally enabled by adding class names to your table tag.

Further to this, in addition to controlling the styled features of the table through class names, the stylesheet's colour scheme can be customised using CSS variables.

Class options

Table classes

The default DataTables stylesheet has the following class names available to control the different styling features of a DataTable. These class names should be applied to the table element:

Class name	Description
display	Short-hand for the stripe, hover, row-border and order-column classes.
cell-border	Border around all four sides of each cell
compact	Reduce the amount of white-space the default styling for the DataTable uses, increasing the information density on screen (since 1.10.1)
hover	Row highlighting on mouse over
nowrap	Disable wrapping of content in the table, so all text in the cells is on a single line (since 1.10.1)
order-column	Highlight the column that the table data is currently ordered on
row-border	Border around only the top an bottom of each each (i.e. for the rows). Note cell-border and row-border are mutually exclusive and cannot be used together.
stripe	Row striping

You can use any combination of these class names to build up the table style you want. They will each work with the other options available (with the exception of cell-border and row-border) tinting and shading the base colours as required.

Each option is demonstrated individually in an example table below, so you can see how each component will style the table. Remember that you can add multiple classes to each table, for example you can have class="stripe hover" to generate a table which shows both row striping and mouse hover styling.

Example HTML

To make use of these classes, your table element's class attribute can be set:

<table id="myTable" class="cell-border compact stripe">
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>

Cell classes

In addition to the full table styling options above, the DataTable stylesheet also has basic options for the styling of cells. These can be applied to class individually using HTML, or use columns.className to apply them to all cells in a column.

Class name	Description
dt[-head|-body]-left	Left aligned text
dt[-head|-body]-center	Center aligned text
dt[-head|-body]-right	Right aligned text
dt[-head|-body]-justify	Justify aligned text
dt[-head|-body]-nowrap	nowrap aligned text

For convenience when using columns.className, optionally you can use -head or -body in the class name to indicate if the text alignment should be applied to the cells in the thead or tbody of the table. Omit either option to have it apply to both (as columns.className is added to the header and body cells). For example:

• dt-right - Right align text in the header and body.
• dt-head-right - Right align text in the header only
• dt-body-right - Right align text in the body only.

Example column alignment

The following shows the columns.className option being used to right align the text in the final column of a table:

$('#myTable').DataTable( {
  columnDefs: [
    {
        targets: -1,
        className: 'dt-body-right'
    }
  ]
} );

Examples

display

Short-hand for stripe, hover, row-border and order-column.

Name	Position	Office	Age	Start date	Salary
Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$3,120
Garrett Winters	Director	Edinburgh	63	2011/07/25	$5,300
Ashton Cox	Technical Author	San Francisco	66	2009/01/12	$4,800
Cedric Kelly	Javascript Developer	Edinburgh	22	2012/03/29	$3,600

cell-border

Border around all four sides of each cell

Name	Position	Office	Age	Start date	Salary
Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$3,120
Garrett Winters	Director	Edinburgh	63	2011/07/25	$5,300
Ashton Cox	Technical Author	San Francisco	66	2009/01/12	$4,800
Cedric Kelly	Javascript Developer	Edinburgh	22	2012/03/29	$3,600

compact

Reduce the amount of white-space the default styling for the DataTable uses, increasing the information density on screen, as shown below. Note that this style requires DataTables 1.10.1 or newer.

Name	Position	Office	Age	Start date	Salary
Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$3,120
Garrett Winters	Director	Edinburgh	63	2011/07/25	$5,300
Ashton Cox	Technical Author	San Francisco	66	2009/01/12	$4,800
Cedric Kelly	Javascript Developer	Edinburgh	22	2012/03/29	$3,600

hover

Row highlighting on mouse hover

Name	Position	Office	Age	Start date	Salary
Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$3,120
Garrett Winters	Director	Edinburgh	63	2011/07/25	$5,300
Ashton Cox	Technical Author	San Francisco	66	2009/01/12	$4,800
Cedric Kelly	Javascript Developer	Edinburgh	22	2012/03/29	$3,600

nowrap

Disable line wrapping of content in the table cells, so the text will always appear on one line. Note that this style requires DataTables 1.10.1 or newer.

Name	Position	Office	Age	Start date	Salary
Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$3,120
Garrett Winters	Director	Edinburgh	63	2011/07/25	$5,300
Ashton Cox	Technical Author	San Francisco	66	2009/01/12	$4,800
Cedric Kelly	Javascript Developer	Edinburgh	22	2012/03/29	$3,600

order-column

Highlight the ordering column

Name	Position	Office	Age	Start date	Salary
Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$3,120
Garrett Winters	Director	Edinburgh	63	2011/07/25	$5,300
Ashton Cox	Technical Author	San Francisco	66	2009/01/12	$4,800
Cedric Kelly	Javascript Developer	Edinburgh	22	2012/03/29	$3,600

row-border

Border on the rows only

Name	Position	Office	Age	Start date	Salary
Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$3,120
Garrett Winters	Director	Edinburgh	63	2011/07/25	$5,300
Ashton Cox	Technical Author	San Francisco	66	2009/01/12	$4,800
Cedric Kelly	Javascript Developer	Edinburgh	22	2012/03/29	$3,600

stripe

Row striping.

Name	Position	Office	Age	Start date	Salary
Name	Position	Office	Age	Start date	Salary
Tiger Nixon	System Architect	Edinburgh	61	2011/04/25	$3,120
Garrett Winters	Director	Edinburgh	63	2011/07/25	$5,300
Ashton Cox	Technical Author	San Francisco	66	2009/01/12	$4,800
Cedric Kelly	Javascript Developer	Edinburgh	22	2012/03/29	$3,600