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

Question

虽然不建议使用inline css但我只是想在一个特殊情况下测试它，因此想要将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中包含样式并使用直接子符号（ > ）来提供样式首选项。 像这样。

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

它可能是内部具有边框的元素，在这种情况下，内联样式需要应用于具有边框的元素，如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> 

Answer 3

最简单的方法是在引导默认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

Answer 4

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

http://www.bootply.com/oAYBUqQet3

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

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

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