CSS背景颜色不覆盖数据表样式？答案

【问题标题】：CSS background colour not overriding Datatables styling?CSS背景颜色不覆盖数据表样式？
【发布时间】：2021-02-21 17:51:50
【问题描述】：

我已经在我的 html 中实现了一个 Datatables，除了我的 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;
    }

我是否遗漏了一些非常明显的东西？

谢谢

【问题讨论】：

关于样式有documentation。您是否尝试删除桌子上的display 类？
@LouysPatriceBessette 是的，它删除了条纹等并且没有更新背景颜色。一旦我从 div 中删除了高度，它现在只更改标题行的背景颜色

标签： html css datatables

【解决方案1】：

请检查包装div的高度，并使其显示：块，我认为它可能没有高度。

【讨论】：

我删除了 min-vh-100 和显示块，现在只更改了标题行的背景颜色？

【解决方案2】：

对于任何感兴趣的人，我在浏览器上使用了检查，并且能够缩小到我想要更改颜色的特定区域。然后我在css中引用了这个。必须非常具体地说明您要更改颜色的区域。

table.dataTable,
    table.dataTable th,
    table.dataTable td {
        opacity: 0.85;
    }

【讨论】：