html - CSS:更改表格标题的边框颜色

Question

只是想问一下如何更改表头外部的边框颜色。表头之间的边界应保持白色。我做了几处更改，但默认的灰色似乎没有改变。这是我的代码:

.table th {
  background-color: #3886BE;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive" id="query_result" style="margin-left:10px;margin-right:10px;">

  <form>
    <table class="table table-bordered table-responsive">
      <tr>
        <th>No.</th>
        <th>Details</th>
        <th>S.O.</th>
        <th>Client Name</th>
        <th>Company</th>
        <th>Service Avail</th>
        <th>Category</th>
        <th>Received</th>
        <th>Completion</th>
        <th>Remaining</th>
        <th>Timeline</th>
        <th>Status</th>
      </tr>
    </table>
  </form>
</div>

您可以查看下图以供引用。我在那里留下一些标题以获取更多详细信息。 enter image description here

Answer 1

给你伙计:)

.table th {
  background-color: #3886BE;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
}
.table-bordered td, .table-bordered th {
    border: 1px solid #3886BE !important;
border-left: 1px solid #fff !important;
    border-right: 1px solid #fff !important;
}
.table-bordered {
    border: 0 !important;
}
table.table.table-bordered.table-responsive {
    margin-top: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive" id="query_result" style="margin-left:10px;margin-right:10px;">

  <form>
    <table class="table table-bordered table-responsive">
      <tr>
        <th>No.</th>
        <th>Details</th>
        <th>S.O.</th>
        <th>Client Name</th>
        <th>Company</th>
      </tr>
    </table>
  </form>
</div>