datatable修改表格边框颜色
时间: 2023-07-31 17:08:56 浏览: 90
可以使用CSS样式来修改datatable表格的边框颜色。以下是一个示例:
```
<style>
table.dataTable, table.dataTable th, table.dataTable td {
border: 1px solid #ccc;
}
</style>
```
在这个示例中,我们将datatable表格、表头和单元格的边框颜色都设置为灰色。你可以将`#ccc`替换成你想要的颜色。将这段样式添加到你的HTML页面中的`<head>`标签中即可生效。
相关问题
datatable修改表格边框颜色和bootstrap panel颜色一致
可以通过CSS样式来实现将Datatable表格边框颜色和Bootstrap面板颜色统一的效果。
首先,可以使用以下样式将Datatable表格边框颜色设置为与Bootstrap面板颜色相同:
```css
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing {
color: #333;
}
.dataTables_wrapper {
border: 1px solid #ddd;
}
.dataTables_wrapper .dataTables_filter input[type="search"] {
border: 1px solid #ddd;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
border: 1px solid #ddd;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
background: #337ab7;
border: 1px solid #337ab7;
color: #fff;
}
```
然后,将Bootstrap面板的背景色应用到Datatable表格中,可以使用以下样式:
```css
.panel-primary > .panel-heading {
background-color: #337ab7;
border-color: #337ab7;
color: #fff;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #337ab7;
}
```
这样就可以将Datatable表格边框颜色和Bootstrap面板颜色统一了。
datatable如何改变表格框线颜色
要改变DataTable表格框线颜色,可以使用CSS样式来实现。以下是一个示例:
```css
table.dataTable {
border: 2px solid #000;
}
table.dataTable th,
table.dataTable td {
border: 1px solid #000;
}
```
在这个示例中,我们将表格的整个边框设置为2像素宽的黑色实线,表格中的单元格边框设置为1像素宽的黑色实线。你可以根据需要更改颜色和线条宽度。将以上代码添加到你的CSS文件中,然后将其链接到你的网页即可。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)