隐藏表格中某些列的边框答案

【问题标题】：Hide borders of some columns in a table隐藏表格中某些列的边框
【发布时间】：2017-04-11 00:47:12
【问题描述】：

我正在构建一个引导表：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 的解决方案也可以...

【问题讨论】：

标签： javascript twitter-bootstrap html-table css-tables bootstrap-table

【解决方案1】：

假设您希望在每对奇数和偶数 <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)) 内的所有奇数(th:nth-child(odd)) <th> 元素设置为带有border-right-width 或0 的样式（有效地隐藏它，虽然border-right-color: transparent; 或border-right-style: none 会达到非常相似的最终结果）。

第二个选择器做同样的事情，但选择<thead> 的第二个<tr> 的偶数子代。

鉴于以下评论，明确要求：

抱歉，我还想删除第 3、4、5 行、h1 和 h2 列之间、h3 和 h4 之间以及 h4 和 h5 之间的边界。

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

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.

这与上面完全相同，但也选择了 tbody 的奇数和偶数 <td> 子元素，并将它们与 @987654346 的第二个 <tr> 的 <th> 元素一起适当地设置样式@。

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

我也想删除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 Fiddle demo.

【讨论】：

抱歉，我还想删除第 3、4、5 行、h1 和 h2 列之间、h3 和 h4 之间以及 h4 和 h5 之间的边界。
抱歉，我错过了问题的那一部分；如果您看到编辑后的答案，我认为这应该是您正在寻找的？
我理解你的想法...我们很接近了，我也想删除h4和h5之间的边界...
如果你可以看看编辑检查；我希望我终于得到了接近你要求的地方？不过，很抱歉我今天早上明显无法阅读……：-/
不客气，我只能为多次延误和我今天明显无法阅读而道歉...... >.

【解决方案2】：

你需要在你要去掉的边框的左右两边设置边框等于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>

【讨论】：

可以，但是很遗憾，我们必须逐个单元格而不是逐列地制作样式...
是的，很烦人。也许有更快的方法来做到这一点？但我不知道：/。也许如果您在隐藏边框的同时复制和粘贴表格会更快？ : /