詳細檢視

在窄螢幕上，當響應式設計從顯示畫面中移除欄位時，隱藏欄位中的資料可能仍然對終端使用者有用且相關。為此，響應式設計能夠以多種方式顯示一列中的資訊，包括使用 DataTables 的子列功能 (row().child()) 或彈出式視窗。這也是可擴展的，如果需要，可以定義自訂方法。

顯示方法

顯示一列資訊的方法由 responsive.details.display 選項控制。此選項應設定為一個函數，該函數將顯示列的資訊（基於渲染的資料 - 請參閱下方）。響應式設計的內建顯示選項在 $.fn.dataTable.Responsive.display 物件中提供 - 它們是

childRow - 在子列中顯示隱藏資訊，終端使用者可以切換其可見性。
childRowImmediate - 立即在子列中顯示資訊，無需等待使用者請求
modal() - 在彈出式視窗中顯示資訊 - 請注意，這是一個函數，在指派時應執行 - 這是為了允許將選項傳遞到正在使用的彈出式視窗函式庫中（請參閱 responsive.details.display 參考文件以了解詳細資訊）。當響應式設計與 Bootstrap、Foundation 或 jQuery UI 一起使用時，它將自動使用它們的原生彈出式視窗對話框函式庫。

例如，您可以使用以下初始化，使用立即顯示控制的子列

$('#myTable').DataTable( {
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.childRowImmediate
        }
    }
} );

childRow 顯示方法是響應式設計將使用的預設選項。它使用子列來顯示響應式設計隱藏的資料。為了保持螢幕整潔，預設情況下，子列不可見，但終端使用者可以選擇查看資料（如果他們願意）。

有關如何建立自訂渲染器的資訊，請參閱 responsive.details.display 參考文件。如果您建立了一個，請告訴我們！

渲染選項

響應式設計有一個內建的渲染器，它將在表格的詳細資料列中顯示隱藏欄位的資料。這是一個 ul/li 列表，其中包含資料欄位的標題和資料本身。每次欄位可見性變更時（例如，桌面瀏覽器調整大小），渲染器都會重新執行，確保保留表格的完整資料。

如果您希望自己控制佈局，或者可能在詳細資料列中新增其他資訊，可以使用 responsive.details.renderer 選項定義自訂渲染器。

上述討論的顯示方法將利用渲染器傳回的資料，允許渲染的資訊完全獨立於其顯示方式（即，它適用於子列和彈出式視窗）。

使用者互動控制項

響應式設計有三個選項可顯示控制項，允許終端使用者透過 responsive.details.type 選項來存取詳細資料列

已停用 (false) - 無法顯示詳細資料列
內嵌 (inline - 預設) - 如果有隱藏欄位，控制項將顯示在表格的第一欄中
基於欄位 (column) - 控制項將顯示在指定的欄位中，該欄位僅用於顯示詳細資料列存取控制項。

當您希望在不變更其結構的情況下將響應式設計新增至現有表格時，inline 類型很有用。當您不希望第一欄的佈局因第一欄中顯示的控制項圖示而改變時，column 類型很有用，就像 inline 一樣。