如何使用内联css更改引导表的边框颜色

Question

虽然inline css不推荐,但我只是想在一个特殊情况下测试它,因此想要覆盖a bootstrap table到白色的默认边框颜色.但以下不起作用.它仍然显示引导表的默认边框颜色.如果没有使用javascript或没有使用默认的bootstrap css,它如何实现或有什么其他选择？

<table class="table table-bordered" style="border-color:white;">
...
...
</table>

Answer 1

使用仅style="border-color:white;"将表格边框设置为白色,但它们被th和td样式覆盖.

你必须将其设置为每一个th和td太.如果您仅使用Inline css,则会耗费大量时间.更简单的方法是在css中包含样式并使用direct-child sign(>)来提供样式首选项.像这样.

table.table-bordered > thead > tr > th{
  border:1px solid blue;
}

这是一个工作片段:

table.table-bordered{
    border:1px solid blue;
    margin-top:20px;
  }
table.table-bordered > thead > tr > th{
    border:1px solid blue;
}
table.table-bordered > tbody > tr > td{
    border:1px solid blue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

最简单的方法是在引导默认 CSS 之后添加您自己的 CSS 文件，并进行自定义更改。不确定您使用的版本，但这是在 3.3.7 中应用边框的方式，您必须覆盖该规则：

.table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border: 1px solid red; //your desired color
}

演示：http : //www.bootply.com/T5xU5ismja