Question

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

Answer 1

您需要在边框的左右两侧设置等于0px的边框。

例如：

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

这应该是下面的整个代码。尝试一下。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

JS Fiddle demo

这会对th:nth-child(odd)元素中第二<th>（<tr>）内的所有奇数（tr:nth-child(2)）<thead>元素进行样式设置{{{ 1 {}} border-right-width（有效隐藏它，虽然0或border-right-color: transparent;会达到非常相似的最终结果。）

第二个选择器完全相同，但选择border-right-style: none的第二个<tr>的偶数子项。

鉴于以下评论，澄清要求：

对不起，我还想删除第3,4,5行，h1和h2列之间，h3和h4之间以及h4和h5之间的边界。

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

<thead>

＆＃13;

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;
}

＆＃13;

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;
}

＆＃13;

JS Fiddle demo

这与上面完全相同，但也会选择<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>的奇数，偶数<td>子项，并将它们与第二个tbody元素一起正确设置样式{ {1}}的{1}}。

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

我还想删除h4和h5之间的边框

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

<th>

＆＃13;

<tr>

＆＃13;

<thead>

＆＃13;

JS Fiddle demo

隐藏表中某些列的边框

2 个答案: