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

时间:2019-06-05 14:42:12

标签: html css

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

.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

1 个答案:

答案 0 :(得分:0)

你在这里去哥们:)

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