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