使用更具体的规则

Question

如何使用Bootstrap CSS更改HTML表格中的列边框？

这是我到目前为止的地方：

Boostrap预定义表

enter image description here

桌子放在一个超大屏幕内，我想改变桌子的边框和线条，这样可以更加区分。这是我到目前为止的地方。

enter image description here

如您所见，列之间的表格行保持不变。怎么能改变呢？

感谢接受有关改善表格外观的任何其他建议

table.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
    <div class="jumbotron">
        <h2>Employees</h2>
        <div class="row">
            <div class="col-md-12">
                <div class="pull-right">
                    <button class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal">Add New Record</button>
                </div>
            </div>
        </div>
        <br>
        <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>
            <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
            </tr>
            <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

</body>

table.css

.jumbotron{
    margin-top:250px
}

tr {
    border: 3px solid gray;
}

代码现在位于JsFiddle。

Answer 1

添加border left＆amp; right至td＆amp; th：

table td ,table th{
    border-left: 3px solid gray !important;
    border-right: 3px solid gray !important;
}


table td:first-child {
    border-left: none;
}

table td:last-child {
    border-right: none;
}

Answer 2

试试这个

＆＃13;

.jumbotron .table-bordered tbody tr {
  border: 3px solid gray;
}

.jumbotron .table-bordered tbody tr td {
  border: 3px solid gray;
}

.jumbotron .table-bordered tbody tr {
  border: 3px solid gray;
}

.jumbotron .table-bordered thead tr {
  border: 3px solid gray;
}

.jumbotron .table-bordered thead tr th {
  border: 3px solid gray;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="jumbotron">
      <h2>Employees</h2>
      <div class="row">
        <div class="col-md-12">
          <div class="pull-right">
            <button class="btn btn-primary" data-toggle="modal" data-target="#add_new_record_modal">Add New Record</button>
          </div>
        </div>
      </div>
      <br>
      <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>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

</body>

＆＃13;

Answer 3

The reason why you are not being able to set column border is because of the CSS specificity。您的规则被更具体的规则覆盖，在您的情况下，<td>的最具体的规则是.table-bordered>tbody>tr>td，它由Bootstrap设置。您有几种方法可以解决这种情况：

使用更具体的规则

写入将覆盖Bootstrap设置的规则，例如：

<强> HTML

<table id="employees-table" class="table table-bordered">
  ...
</table>

<强> CSS

#employees-table td,
#employees-table th
{
  border: 3px solid gray;
}

使用！重要例外

使用!important被认为是一种不好的做法，但对于您的情况，它可能是最快捷/最简单的解决方案：

table td,
table th
{
  border: 3px solid gray !important;
}

Answer 4

.table-bordered td, .table-bordered th {
   border: 3px solid gray !important;
}

Boostrap CSS - 更改表边框颜色

4 个答案:

使用更具体的规则

使用！重要例外