datatable是一個非常常用的數據表格插件，而CSS的div是用來定義HTML文檔中的一個區塊。在Web開發中，可以使用datatable和CSS的div來創建和展示美觀和功能豐富的數據表格。
案例一：
，我們需要引用datatable的資源實現對應的樣式和功能。在<head>標簽中添加以下代碼：
<link rel="stylesheet" type="text/css" > <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.js"></script> <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
接下來，在HTML中創建一個div，用于容納數據表格：
<div id="myTable"></div>
在JavaScript中，使用以下代碼初始化datatable，并指定數據源：
<script type="text/javascript">
$(document).ready(function() {
$('#myTable').DataTable({
data: [
[1, 'John Doe', 'johndoe@example.com'],
[2, 'Jane Smith', 'janesmith@example.com'],
[3, 'Bob Johnson', 'bobjohnson@example.com']
],
columns: [
{ title: 'ID' },
{ title: 'Name' },
{ title: 'Email' }
]
});
});
</script>上述代碼中，data指定了數據源，每個數組代表一行數據，columns指定了每列的標題。
案例二：
在某些情況下，我們可能想要自定義數據表格的樣式。可以使用CSS的div來為數據表格添加樣式。
，在HTML中創建一個div并為其添加適當的class，用于指定樣式：
<div id="myStyledTable" class="styledTable"></div>
在CSS中，定義.styledTable的樣式：
.styledTable {
background-color: #f5f5f5;
border: 1px solid #ddd;
padding: 10px;
border-radius: 5px;
max-width: 600px;
margin: 0 auto;
}
<br>
.styledTable table {
width: 100%;
border-collapse: collapse;
}
<br>
.styledTable th, .styledTable td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
<br>
.styledTable th {
background-color: #4CAF50;
color: white;
}最后，在JavaScript中使用datatable初始化該數據表格：
<script type="text/javascript">
$(document).ready(function() {
$('#myStyledTable').DataTable({
data: [
[1, 'John Doe', 'johndoe@example.com'],
[2, 'Jane Smith', 'janesmith@example.com'],
[3, 'Bob Johnson', 'bobjohnson@example.com']
],
columns: [
{ title: 'ID' },
{ title: 'Name' },
{ title: 'Email' }
]
});
});
</script>上述代碼中，我們為div添加了一個名為styledTable的class，并在JavaScript中使用該class初始化datatable。這樣，數據表格就具有了自定義的樣式。
綜上所述，datatable和CSS的div可以共同用來創建和展示美觀和功能豐富的數據表格。通過使用datatable插件和自定義的CSS樣式，可以輕松地實現各種需求，并為用戶提供出色的數據瀏覽體驗。