在表中隐藏某些列的边界

我正在构建一个bootstrap表：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和h5之间的边界。有人知道该怎么做吗？使用JavaScript的解决方案也可以...

假设您希望在每对奇数甚至 <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小提琴演示。

这会在第二个<tr>（tr:nth-child(2)）内的所有奇数（th:nth-child(odd)）<th>元素中的所有奇数（CC_1）元素中的<thead>元素中使用0的border-right-width元素（尽管有效地隐藏）（尽管border-right-color: transparent;或border-right-style: none有效隐藏）将获得非常相似的最终结果）。

第二个选择器确实是同一件事，但选择了<thead>的第二个<tr>的偶数孩子。

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

对不起，我也想在H3和H4之间以及H4和H5之间的列H1和H2之间的第3、4、5行中删除边界。

我建议将选择器修改为以下内容：

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小提琴演示。

这与上述完全相同，但还选择了tbody的<td>奇数，甚至可以选择<th>的CC_21元素，并适当地设计它们。

。。

虽然所有要求都在这个问题中，但由于未知的原因，我似乎对这个问题进行了误解。再次提示，在下面的评论中再次：

我也想删除H4和H5
之间的边界

这里的方法保持不变，但是我们使用的选择器稍微复杂得多，可以选择适当的元素：

/* 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小提琴演示。

您需要在要摆脱的边框的左侧和右侧设置等于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>

相关内容

最新更新

热门标签：