預設樣式選項

將您的表格樣式調整到完美符合您的網站/應用程式，對於確保您的最終使用者獲得無縫的介面體驗至關重要。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	系統架構師	愛丁堡	61	2011/04/25	$3,120
Garrett Winters	總監	愛丁堡	63	2011/07/25	$5,300
Ashton Cox	技術作者	舊金山	66	2009/01/12	$4,800
Cedric Kelly	Javascript 開發人員	愛丁堡	22	2012/03/29	$3,600

cell-border

每個儲存格四邊的邊框

姓名	職位	辦公室	年齡	開始日期	薪資
姓名	職位	辦公室	年齡	開始日期	薪資
Tiger Nixon	系統架構師	愛丁堡	61	2011/04/25	$3,120
Garrett Winters	總監	愛丁堡	63	2011/07/25	$5,300
Ashton Cox	技術作者	舊金山	66	2009/01/12	$4,800
Cedric Kelly	Javascript 開發人員	愛丁堡	22	2012/03/29	$3,600

compact

減少 DataTable 預設樣式使用的空白空間量，增加螢幕上的資訊密度，如下所示。請注意，此樣式需要 DataTables 1.10.1 或更新版本。

姓名	職位	辦公室	年齡	開始日期	薪資
姓名	職位	辦公室	年齡	開始日期	薪資
Tiger Nixon	系統架構師	愛丁堡	61	2011/04/25	$3,120
Garrett Winters	總監	愛丁堡	63	2011/07/25	$5,300
Ashton Cox	技術作者	舊金山	66	2009/01/12	$4,800
Cedric Kelly	Javascript 開發人員	愛丁堡	22	2012/03/29	$3,600

hover

滑鼠懸停時的列突出顯示

姓名	職位	辦公室	年齡	開始日期	薪資
姓名	職位	辦公室	年齡	開始日期	薪資
Tiger Nixon	系統架構師	愛丁堡	61	2011/04/25	$3,120
Garrett Winters	總監	愛丁堡	63	2011/07/25	$5,300
Ashton Cox	技術作者	舊金山	66	2009/01/12	$4,800
Cedric Kelly	Javascript 開發人員	愛丁堡	22	2012/03/29	$3,600

nowrap

停用表格儲存格中內容的換行，因此文字將始終顯示在一行上。請注意，此樣式需要 DataTables 1.10.1 或更新版本。

姓名	職位	辦公室	年齡	開始日期	薪資
姓名	職位	辦公室	年齡	開始日期	薪資
Tiger Nixon	系統架構師	愛丁堡	61	2011/04/25	$3,120
Garrett Winters	總監	愛丁堡	63	2011/07/25	$5,300
Ashton Cox	技術作者	舊金山	66	2009/01/12	$4,800
Cedric Kelly	Javascript 開發人員	愛丁堡	22	2012/03/29	$3,600

order-column

突出顯示排序欄

姓名	職位	辦公室	年齡	開始日期	薪資
姓名	職位	辦公室	年齡	開始日期	薪資
Tiger Nixon	系統架構師	愛丁堡	61	2011/04/25	$3,120
Garrett Winters	總監	愛丁堡	63	2011/07/25	$5,300
Ashton Cox	技術作者	舊金山	66	2009/01/12	$4,800
Cedric Kelly	Javascript 開發人員	愛丁堡	22	2012/03/29	$3,600

row-border

僅在列上加邊框

姓名	職位	辦公室	年齡	開始日期	薪資
姓名	職位	辦公室	年齡	開始日期	薪資
Tiger Nixon	系統架構師	愛丁堡	61	2011/04/25	$3,120
Garrett Winters	總監	愛丁堡	63	2011/07/25	$5,300
Ashton Cox	技術作者	舊金山	66	2009/01/12	$4,800
Cedric Kelly	Javascript 開發人員	愛丁堡	22	2012/03/29	$3,600

stripe

列條紋。

姓名	職位	辦公室	年齡	開始日期	薪資
姓名	職位	辦公室	年齡	開始日期	薪資
Tiger Nixon	系統架構師	愛丁堡	61	2011/04/25	$3,120
Garrett Winters	總監	愛丁堡	63	2011/07/25	$5,300
Ashton Cox	技術作者	舊金山	66	2009/01/12	$4,800
Cedric Kelly	Javascript 開發人員	愛丁堡	22	2012/03/29	$3,600