隐藏 table 中某些列的边框

Question

我正在构建 bootstrap table: JSBin:

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
    table.table-border {
      border: 2px solid #E6E9ED;
    }
    table, th, td {
      border: 1px solid #E6E9ED;
      text-align: center
    }
  </style>
</head>
<body>
  <div class="table-responsive">
    <table class="table table-condensed table-border table-striped">
      <thead>
        <tr>
          <th colspan="2">h12</th>
          <th colspan="4">h345</th>
        </tr>
        <tr>
          <th>h1</th>
          <th>h2</th>
          <th>h3</th>
          <th>h4</th>
          <th>h5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>abc</td><td></td><td></td><td></td><td></td>
        </tr>
        <tr>
          <td>efg</td><td></td><td></td><td></td><td></td>
        </tr>
        <tr>
          <td>hij</td><td></td><td></td><td></td><td></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

我想隐藏列 h1 和 h2、h3 和 h4 以及 h4 和 [=17] 之间的边框=].有谁知道该怎么做？ JavaScript 的解决方案也可以...

Answer 1

您需要将要删除的边框的左右两侧的边框都设置为 0px。

例如：

<td style="border-right:0px;"> abc </td>
<td style="border-left:0px;"></td>

这应该是下面的全部代码。试试吧。

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
    table.table-border {
      border: 2px solid #E6E9ED;
    }
    table, th, td {
      border: 1px solid #E6E9ED;
      text-align: center
    }
  </style>
</head>
<body>
  <div class="table-responsive">
    <table class="table table-condensed table-border table-striped">
      <thead>
        <tr>
          <th colspan="2">h12</th>
          <th colspan="4">h345</th>
        </tr>
        <tr>
          <th>h1</th>
          <th>h2</th>
          <th>h3</th>
          <th>h4</th>
          <th>h5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td style="border-right:0px;">abc</td><td style="border-left:0px;" > </td><td style="border-right:0px;"></td><td style="border-left:0px; border-right:0px;"></td><td style="border-left:0px;""></td>
        </tr>
        <tr>
          <td style="border-right:0px;">efg</td><td style="border-left:0px;" > </td><td style="border-right:0px;"></td><td style="border-left:0px; border-right:0px;"></td><td style="border-left:0px;""></td>
        </tr>
        <tr>
          <td style="border-right:0px;">hij</td><td style="border-left:0px;" > </td><td style="border-right:0px;"></td><td style="border-left:0px; border-right:0px;"></td><td style="border-left:0px;""></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

Answer 2

假设您希望在每对奇数和偶数 <td> 元素之间移除边框或使其透明，则可以执行以下操作：

thead tr:nth-child(2) th:nth-child(odd) {
  border-right-width: 0;
}

thead tr:nth-child(2) th:nth-child(even) {
  border-left-width: 0;
}

table.table-border {
  border: 2px solid #E6E9ED;
}
table,
th,
td {
  border: 1px solid #E6E9ED;
  text-align: center
}
thead tr:nth-child(2) th:nth-child(odd) {
  border-right-width: 0;
}
thead tr:nth-child(2) th:nth-child(even) {
  border-left-width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="table-responsive">
  <table class="table table-condensed table-border table-striped">
    <thead>
      <tr>
        <th colspan="2">h12</th>
        <th colspan="4">h345</th>
      </tr>
      <tr>
        <th>h1</th>
        <th>h2</th>
        <th>h3</th>
        <th>h4</th>
        <th>h5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>abc</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>efg</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>hij</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

JS Fiddle demo.

这会为 <thead> 元素中第二个 <tr> (tr:nth-child(2)) 中的所有 odd-numbered (th:nth-child(odd)) <th> 元素设置样式border-right-width 为 0（有效隐藏它，尽管 border-right-color: transparent; 或 border-right-style: none 会实现非常相似的 end-result）。

第二个 selector 做完全相同的事情，但是 selects even-numbered children 第二个 <tr> <thead> =].

鉴于下面的评论，明确要求：

Sorry, I also want to delete the borders in Rows 3, 4, 5, between the columns h1 and h2, between h3 and h4, and between h4 and h5.

我建议将 selector 修改为以下内容：

thead tr:nth-child(2) th:nth-child(odd),
tbody tr td:nth-child(odd) {
  border-right-width: 0;
}

thead tr:nth-child(2) th:nth-child(even),
tbody tr td:nth-child(even) {
  border-left-width: 0;
}

table.table-border {
  border: 2px solid #E6E9ED;
}
table,
th,
td {
  border: 1px solid #E6E9ED;
  text-align: center
}
thead tr:nth-child(2) th:nth-child(odd),
tbody td:nth-child(odd) {
  border-right-width: 0;
}

thead tr:nth-child(2) th:nth-child(even),
tbody td:nth-child(even) {
  border-left-width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="table-responsive">
  <table class="table table-condensed table-border table-striped">
    <thead>
      <tr>
        <th colspan="2">h12</th>
        <th colspan="4">h345</th>
      </tr>
      <tr>
        <th>h1</th>
        <th>h2</th>
        <th>h3</th>
        <th>h4</th>
        <th>h5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>abc</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>efg</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>hij</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

JS Fiddle demo.

这与上面的完全相同，但是 select 是 tbody 的奇数和偶数 <td> children 并适当地设置它们的样式<thead> 的第二个 <tr> 的 <th> 个元素。

虽然所有要求都在问题中，但我似乎故意误读了问题，原因不明。再次提示，在下面的评论中：

I also want to delete the border between h4 and h5

此处的方法保持不变，但我们使用稍微复杂的 selector 来 select 适当的元素：

/* Selects the first <th> child of the second <tr>
   descendent of the <thead>, and also every first
   <td> child contained within the <tbody>: */
thead tr:nth-child(2) th:first-child,
tbody td:first-child {
  border-right-width: 0;
}

/* Selects the second <th> child of the second <tr>
   descendent of the <thead>, and also every second
   <td> child contained within the <tbody>: */
thead tr:nth-child(2) th:nth-child(2),
tbody td:nth-child(2) {
  border-left-width: 0;
}

/* Selects every <th> element that follows the second
   <th> child element of the second <tr> of the <thead>
   using the general sibling ('~') combinator; and also
   every <td> that appears after the second <td> of the
   <tbody>: */
thead tr:nth-child(2) th:nth-child(2) ~ th,
tbody td:nth-child(2) ~ td {
  border-left-width: 0;
}
/* Because we (presumably) want the final <th> and <td>
   of each <tr> to retain its right-border, we here select
   every <th> element which is not the last-child of its
   parent which follows the second-child of the parent, and
   similarly for the <td> elements: */
thead tr:nth-child(2) th:nth-child(2) ~ th:not(:last-child),
tbody td:nth-child(2) ~ td:not(:last-child) {
  border-right-width: 0;
}

table.table-border {
  border: 2px solid #E6E9ED;
}
table,
th,
td {
  border: 1px solid #E6E9ED;
  text-align: center
}
thead tr:nth-child(2) th:first-child,
tbody td:first-child {
  border-right-width: 0;
}
thead tr:nth-child(2) th:nth-child(2),
tbody td:nth-child(2) {
  border-left-width: 0;
}
thead tr:nth-child(2) th:nth-child(2) ~ th,
tbody td:nth-child(2) ~ td {
  border-left-width: 0;
}
thead tr:nth-child(2) th:nth-child(2) ~ th:not(:last-child),
tbody td:nth-child(2) ~ td:not(:last-child) {
  border-right-width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="table-responsive">
  <table class="table table-condensed table-border table-striped">
    <thead>
      <tr>
        <th colspan="2">h12</th>
        <th colspan="4">h345</th>
      </tr>
      <tr>
        <th>h1</th>
        <th>h2</th>
        <th>h3</th>
        <th>h4</th>
        <th>h5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>abc</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>efg</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>hij</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

JS Fiddle demo.

隐藏 table 中某些列的边框

Hide borders of some columns in a table

javascript

twitter-bootstrap

html-table

css-tables

bootstrap-table