Question

我是Bootstrap的新手并尝试覆盖Bootstraps默认表格颜色，特别是行，我想定义另一种纯色。我试过覆盖一个新类，但Bootstrap一直显示默认颜色。我不想编辑原始的Bootstrap CSS文件。请注意我正在尝试使用Odoo版本8，但我确信这无关紧要。

以下是我的表格：

   <table class="table">
            <thead>
                <tr class="filters">
                    <th><input type="text" class="form-control" placeholder="#" disabled=""></th>
                    <th><input type="text" class="form-control" placeholder="First Name" disabled=""></th>
                    <th><input type="text" class="form-control" placeholder="Last Name" disabled=""></th>
                    <th><input type="text" class="form-control" placeholder="Username" disabled=""></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>

从我可以看到的Bootstrap CSS我可以看到这是正在应用的代码：

}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #000;
}

Answer 1

我知道你说你已经尝试过添加自己的课程并覆盖（这是正确的方法）而没有成功，但请看下面的内容 - 我通过添加自己的.table.custom > thead > tr > td {}让它工作正常使用.table.custom > thead > tr > th, .table.custom > tbody > tr > th, .table.custom > tfoot > tr > th, .table.custom > thead > tr > td, .table.custom > tbody > tr > td, .table.custom > tfoot > tr > td { background-color: red; border-top: 4px solid #fff; } //for custom table row .table.custom tr { background-color: red; border-top: 4px solid #fff; }

对CSS进行分类然后覆盖CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<table class="table custom">
            <thead>
                <tr class="filters">
                    <th><input type="text" class="form-control" placeholder="#" disabled=""></th>
                    <th><input type="text" class="form-control" placeholder="First Name" disabled=""></th>
                    <th><input type="text" class="form-control" placeholder="Last Name" disabled=""></th>
                    <th><input type="text" class="form-control" placeholder="Username" disabled=""></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>

{{1}}

注意：当然，你必须做一些工作才能让它看起来像你想要的那样，但它证明了这一点。

覆盖Bootstraps表行颜色

1 个答案: