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

【问题标题】：How to change the border color of bootstrap table using inline css如何使用内联 css 更改引导表的边框颜色
【发布时间】：2017-01-14 01:53:30
【问题描述】：

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

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

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

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

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

这是一个有效的 sn-p ：

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>

【讨论】：

【解决方案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

【讨论】：

我在这里快速找到的最佳答案。它不仅会像选择的答案那样更改标题。

【解决方案3】：

可能是里面的元素有边框，这种情况下需要对有边框的元素应用内联样式，比如td

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <tr>
    <td style="border-color:white;">asdf</td>
  </tr>
</table>

【讨论】：

【解决方案4】：

如果您只想定位表头，请使用以下代码：-

http://www.bootply.com/oAYBUqQet3

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

【讨论】：

【解决方案5】：

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>

【讨论】：

【解决方案6】：

试试这个：

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

【讨论】：