如何解决CSS 背景颜色不会覆盖数据表样式?
我已经在我的 html 中实现了一个数据表,除了我的 css 样式之外,一切都正常吗?我真的只是想改变背景颜色,它不会改变?
表格代码:
<div class="container-fluid d-flex flex-column min-vh-100 justify-content-center align-items-center">
<div class=" row d-flex justify-content-center ">
<!-- Table: Populate from datatables.js-->
<table id="movieTable" class="display" style="width:100%">
<thead>
<tr>
<th>id</th>
<th>Title</th>
<th>Year</th>
<th>Age</th>
<th>IMDb</th>
<th>Rotten Tomatoes</th>
</tr>
</thead>
</table>
</div>
</div>
JS 如下:
<script>
//ajax call to populate datatable from api call
$(document).ready(function() {
$('#movieTable').DataTable({
"ajax": {
//id set to 4 to return Hulu results from api
"url": "fake url for security","dataSrc": "data"
},"columns": [{
//id needed to ensure unique identifier,hidden for better UI design
"data": "id","visible": false
},{
"data": "Title"
},{
"data": "Year"
},{
"data": "Age"
},{
"data": "IMDb"
},{
"data": "Rotten Tomatoes"
},],columnDefs: [
{
targets: -1,className: 'dt-body-center'
}
]
});
});
</script>
我加的css如下,还加了!important试试强制:
#movieTable_wrapper {
background-color: black !important;
}
我是否遗漏了一些非常明显的东西?
谢谢
解决方法
请检查包装div的高度,并使其显示:块,我认为它可以没有高度。
,对于任何感兴趣的人,我在浏览器上使用了检查,并且能够缩小到我想要更改颜色的特定区域。然后我在css中引用了这个。必须非常具体地说明要更改颜色的区域。
table.dataTable,table.dataTable th,table.dataTable td {
opacity: 0.85;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。