默认样式选项

为你的表格进行样式设置，以完美地适应你的网站/应用程序，对于确保你的最终用户获得无缝界面非常重要。DataTables 样式提供了一组基本样式，用于定位搜索输入框、分页控制等元素，但它还有一些功能，可以通过向你的 table 标记添加类名称来选择性启用。

此外，除了通过类名称控制表格的样式化功能外，还可以使用 CSS 变量自定义样式表的配色方案。

类选项

表格类

默认的 DataTables 样式表提供了以下类名称来控制 DataTable 的不同样式功能。这些类名称应应用于 table 元素

类名称	描述
display	stripe、hover、row-border 和 order-column 类别的速记。
cell-border	每个单元格四边的边框
compact	减小 DataTable 默认样式使用的空白空间，提高屏幕上的信息密度（自 1.10.1 起）
hover	鼠标经过时的高亮显示
nowrap	禁用表格中内容的换行，因此单元格中的所有文本都在一行上（自 1.10.1 起）
order-column	高亮显示当前对表格数据进行排序的列
row-border	仅为每个单元格的顶部和底部添加边框（即为行）。注意 cell-border 和 row-border 互斥，不能一起使用。
stripe	行条纹

你可以使用这些类名称的任何组合来构建想要的表格样式。它们都将与其他可用选项配合使用（cell-border 和 row-border 除外），会根据需要调色和阴影基本颜色。

每个选项都在下面的范例表格中单独演示，以便你可以看到每个组件如何设置表格样式。请记住，你可以向每个表格添加多个类，例如，你可以使用 class="stripe hover" 来生成同时显示行条纹和鼠标悬停样式的表格。

HTML 范例

要使用这些类，你的 table 元素的 class 属性可以设置为

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

单元格类

除上述的完整表格样式选项之外，DataTable 样式表还提供了用于设置单元格样式的基本选项。这些选项可以使用 HTML 单独应用于类，或使用 columns.className 将它们应用到一列中的所有单元格。

类名称	描述
dt[-head|-body]-left	左对齐文本
dt[-head|-body]-center	居中对齐文本
dt[-head|-body]-right	右对齐文本
dt[-head|-body]-justify	两端对齐文本
dt[-head|-body]-nowrap	不进行换行对齐文本

为了在使用 columns.className 时更为方便，您可以在类名中选择使用 -head 或 -body 来指示文本的对齐方式应该应用于表格的 thead 或 tbody 中的单元格。省略任何一个选项将其应用于两者（因为 columns.className 会被添加到表头和主体单元格中）。例如

• dt-right - 右对齐表头和主体中的文本。
• dt-head-right - 仅右对齐表头中的文本
• dt-body-right - 仅右对齐主体中的文本。

示例列对齐

下面显示 columns.className 选项用于右对齐表格的最后一行中的文本

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

示例

display

stripe、hover、row-border 和 order-column 的简写。

姓名	职位	办公室	年龄	开始日期	工资
姓名	职位	办公室	年龄	开始日期	工资
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

每个单元格四边的边框

姓名	职位	办公室	年龄	开始日期	工资
姓名	职位	办公室	年龄	开始日期	工资
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

减少 DataTable 默认样式使用的空白间距，增加屏幕上的信息密度，如下所示。请注意，此样式需要 DataTables 1.10.1 或更新版本。

姓名	职位	办公室	年龄	开始日期	工资
姓名	职位	办公室	年龄	开始日期	工资
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

鼠标悬停时的行高亮

姓名	职位	办公室	年龄	开始日期	工资
姓名	职位	办公室	年龄	开始日期	工资
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

禁用表格单元格中内容的换行，因此文本始终显示在一行上。请注意，此样式需要 DataTables 1.10.1 或更新版本。

姓名	职位	办公室	年龄	开始日期	工资
姓名	职位	办公室	年龄	开始日期	工资
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

突出显示排序的列

姓名	职位	办公室	年龄	开始日期	工资
姓名	职位	办公室	年龄	开始日期	工资
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

仅对行进行边框

姓名	职位	办公室	年龄	开始日期	工资
姓名	职位	办公室	年龄	开始日期	工资
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

行条纹。

姓名	职位	办公室	年龄	开始日期	工资
姓名	职位	办公室	年龄	开始日期	工资
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