Html 如何使用内联 css 更改引导表的边框颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41646011/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the border color of bootstrap table using inline css
提问by nam
Although inline cssis not recommended but I just want to test it in one special case and hence want to override the default border color of a bootstrap tableto white. But the following does not work. It still displays the default border color of a bootstrap table. How can it be achieved or what are other alternatives withoutusing javascript or withoutmessing around with default bootstrap css?
虽然inline css不推荐，但我只想在一种特殊情况下测试它，因此想要覆盖 abootstrap table到白色的默认边框颜色。但以下不起作用。它仍然显示引导表的默认边框颜色。如何在不使用 javascript 或不使用默认引导 css 的情况下实现它或其他替代方法？
<table class="table table-bordered" style="border-color:white;">
...
...
</table>
回答by ab29007
Using only style="border-color:white;"sets the table border to white but they are being overwritten by the thand tdstyles.
Using onlystyle="border-color:white;"将表格边框设置为白色，但它们被th和td样式覆盖。
You have to set it for every thand tdtoo. If you are using only only Inline css then that will be time consuming. The easier way would be to include the styles in css and use direct-child sign (>) to give the style preference. Like this.
你必须将其设置为每一个th和td太。如果您仅使用内联 css，那么这将非常耗时。更简单的方法是在 css 中包含样式并使用直接子符号 ( >) 来提供样式首选项。像这样。
table.table-bordered > thead > tr > th{
border:1px solid blue;
}
Here is a working snippet :
这是一个工作片段：
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>[email protected]</td>
</tr>
</tbody>
</table>
</div>回答by sinisake
Easiest way is to add your own CSS file, with custom changes, after bootstrap default CSS. Not sure about version you use, but this is how applying of border looks in 3.3.7, and you have to overwrite that rule:
最简单的方法是在引导默认 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
}
回答by Tony Hensler
If you want to only target the table header use the following code:-
如果您只想定位表头，请使用以下代码：-
http://www.bootply.com/oAYBUqQet3
http://www.bootply.com/oAYBUqQet3
.table-bordered > tbody > tr > th {
border: 1px solid blue;
}
回答by hani abukhurma
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>[email protected]</td>
</tr>
</tbody>
</table>
</div>回答by Adrian
Try this:
尝试这个：
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;
}
回答by Michael Coker
It's probably the elements inside that have the border, in which case the inline style needs to be applied to the element that has the border, like the td
可能是里面的元素有边框，在这种情况下，需要将内联样式应用到有边框的元素上，比如 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>