覆盖 Bootstraps Table 行颜色
Overriding Bootstraps Table Row Colors
我是 Bootstrap 的新手,正在尝试覆盖 Bootstrap 的默认 table 颜色,尤其是行,我想定义另一种纯色。我尝试用新的 class 覆盖,但 Bootstrap 一直显示默认颜色。我不想编辑原始 Bootstrap CSS 文件。请注意,我正在尝试使用 Odoo 版本 8 执行此操作,但我确信这无关紧要。
下面是我的table:
<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;
}
我知道你说过你已经尝试添加你自己的 class 并覆盖(这是正确的方法)但没有成功,但请看下面 - 我通过添加我的拥有 .custom
class 然后使用 .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>
注意:您当然需要做一些工作才能让它看起来像您想要的那样,但它证明了这一点。
我是 Bootstrap 的新手,正在尝试覆盖 Bootstrap 的默认 table 颜色,尤其是行,我想定义另一种纯色。我尝试用新的 class 覆盖,但 Bootstrap 一直显示默认颜色。我不想编辑原始 Bootstrap CSS 文件。请注意,我正在尝试使用 Odoo 版本 8 执行此操作,但我确信这无关紧要。
下面是我的table:
<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;
}
我知道你说过你已经尝试添加你自己的 class 并覆盖(这是正确的方法)但没有成功,但请看下面 - 我通过添加我的拥有 .custom
class 然后使用 .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;
}
<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>
注意:您当然需要做一些工作才能让它看起来像您想要的那样,但它证明了这一点。