datatables改变表头颜色
时间: 2023-09-23 11:04:01 浏览: 100
您可以通过修改表头的 CSS 样式来改变 DataTables 表格的表头颜色。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DataTable 表头颜色</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<style>
/* 修改表头颜色 */
th {
background-color: #F8B195;
}
</style>
</head>
<body>
<table id="myTable" class="display">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Charlie</td>
<td>40</td>
<td>Chicago</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable();
});
</script>
</body>
</html>
```
在上面的代码中,我们通过 CSS 样式修改了表头的背景颜色为 `#F8B195`。您可以根据需要自行修改颜色值。此外,为了让 DataTables 生效,我们还需要引入 jQuery 和 DataTables 的相关 JavaScript 文件,并初始化 DataTables。