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
}

演示：https://en.wikipedia.org/wiki/HSL_and_HSV#From_HSL

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

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

6 个答案: