Question

如何将表格的颜色从灰色更改为黑色？我已经尝试了background-color: green，但它不会影响表格的标题背景。

<style type="text/css">
    .table-fixed thead {
        width: 97%;
    }
    .table-fixed tbody {
        height: 230px;
        overflow-y: scroll;
        width: 100%;
    }
    .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
        display: block;
    }
    .table-fixed tbody td, .table-fixed thead > tr> th {
        float: left;
        border-bottom-

width: 0;
    }
</style>
<div class="container">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                 <h4>
                     Fixed Header Scrolling Table 
                 </h4>

            </div>
            <table class="table table-fixed">
                <thead>
                    <tr>
                        <th class="col-xs-2">#</th>
                        <th class="col-xs-8">Name</th>
                        <th class="col-xs-2">Points</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="col-xs-2">1</td>
                        <td class="col-xs-8">Mike Adams</td>
                        <td class="col-xs-2">23</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2">2</td>
                        <td class="col-xs-8">Holly Galivan</td>
                        <td class="col-xs-2">44</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2">3</td>
                        <td class="col-xs-8">Mary Shea</td>
                        <td class="col-xs-2">86</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2">4</td>
                        <td class="col-xs-8">Jim Adams</td>
                        <td class="col-xs-2">23</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2">5</td>
                        <td class="col-xs-8">Henry Galivan</td>
                        <td class="col-xs-2">44</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2">5</td>
                        <td class="col-xs-8">Henry Galivan</td>
                        <td class="col-xs-2">44</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

Answer 1

仅针对.table-fixed类设置背景可以正常工作：

.table-fixed {
    background-color: green;
}

我认为如果标题没有受到影响，你可能只为tbody元素设置了它。

要设置整个面板的背景颜色，可以尝试在面板DIV上设置一个新类，然后在css中设置它的颜色。

<style>
    .panel-green { background-color: green; }
</style>

<div class="panel panel-default panel-green">
    ....
</div>

或在面板上明确设置背景：

<div class="panel panel-default" style="background-color: green">
    ....
</div>

Answer 2

您可以尝试：编辑：忽略th元素

table thead th{
      background:green;
}

这是fiddle demo

Answer 3

您可以使用

.table header{
    background-color:green;
}

Answer 4

我修改了表头颜色，表头文本颜色，表背景颜色。

我在你的代码中添加了一些css代码。我评论了代码

＆＃13;

.table{
     background-color: green;/* done by me */
    
} 


.table-fixed thead {
        width: 97%;
    background-color: red;/* done by me */
    color: white;/* done by me */
    }
    .table-fixed thead {
        width: 97%;
    }
    .table-fixed tbody {
        height: 230px;
        overflow-y: scroll;
        width: 100%;
    }
    .table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
       / display: block;
    }
    .table-fixed tbody td, .table-fixed thead > tr> th {
        float: left;
        border-bottom-

width: 0;
    }

＆＃13;

<div class="container">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                 <h4>
                     Fixed Header Scrolling Table 
                 </h4>

            </div>
            <table class="table table-fixed">
                <thead>
                    <tr>
                        <th class="col-xs-2">#</th>
                        <th class="col-xs-8">Name</th>
                        <th class="col-xs-2">Points</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="col-xs-2">1</td>
                        <td class="col-xs-8">Mike Adams</td>
                        <td class="col-xs-2">23</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2">2</td>
                        <td class="col-xs-8">Holly Galivan</td>
                        <td class="col-xs-2">44</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2">3</td>
                        <td class="col-xs-8">Mary Shea</td>
                        <td class="col-xs-2">86</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2">4</td>
                        <td class="col-xs-8">Jim Adams</td>
                        <td class="col-xs-2">23</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2">5</td>
                        <td class="col-xs-8">Henry Galivan</td>
                        <td class="col-xs-2">44</td>
                    </tr>
                    <tr>
                        <td class="col-xs-2">5</td>
                        <td class="col-xs-8">Henry Galivan</td>
                        <td class="col-xs-2">44</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

＆＃13;

我应该写什么代码来将表的颜色更改为绿色？

4 个答案: