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

Question

虽然不推荐 inline css 但我只想在一种特殊情况下测试它，因此想将 bootstrap table 的默认边框颜色覆盖为白色。但以下不起作用。它仍然显示引导表的默认边框颜色。如何在 不 使用 javascript 或 不 使用默认引导 css 的情况下实现它或其他替代方案？

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

原文由 nam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

您也必须为每个 th 和 td 设置它。如果您只使用内联 css，那么这将非常耗时。更简单的方法是将样式包含在 css 中并使用直接子符号（ > ）来提供样式偏好。像这样。

 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>[e-mail]</td>
      </tr>
    </tbody>
  </table>
</div>

原文由 ab29007 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

原文由 sinisake 发布，翻译遵循 CC BY-SA 3.0 许可协议