覆盖引导表行颜色答案

【问题标题】：Overriding Bootstraps Table Row Colors覆盖引导表行颜色
【发布时间】：2016-05-03 14:58:50
【问题描述】：

我是 Bootstrap 的新手，我想覆盖 Bootstrap 默认的表格颜色，尤其是行，我想定义另一种纯色。我试过用一个新类覆盖，但 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;
}

【问题讨论】：

标签： html css twitter-bootstrap html-table odoo-8

【解决方案1】：

我知道您说过您尝试添加自己的类并覆盖（这是正确的方法）但没有成功，但请看下面 - 通过添加我自己的 .custom 类到然后使用 .table.custom > thead > tr > td {} 覆盖 CSS

.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;
    }

<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>

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

【讨论】：