Search code examples
javascripttwitter-bootstraphtml-tablecss-tablesbootstrap-table

Hide borders of some columns in a table

I am building a 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>

I want to hide the borders between the columns h1 and h2, between h3 and h4, and between h4 and h5. Does anyone know how to do it? A solution with JavaScript will be fine too...

Solution

  • Assuming that you want the borders to be removed, or made transparent, between each pair of odd and even <td> elements, then the following works:

    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.

    This styles all the odd-numbered (th:nth-child(odd)) <th> elements within the second <tr> (tr:nth-child(2)) within the <thead> element with a border-right-width of 0 (effectively hiding it, although border-right-color: transparent; or border-right-style: none would achieve a very similar end-result).

    The second selector does precisely the same thing, but selects the even-numbered children of the second <tr> of the <thead>.

    In view of the comment below, clarifying the requirements:

    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.

    I'd suggest amending the selectors to the following:

    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.

    This does exactly the same as above, but also selects the odd, and even, <td> children of the tbody and styles them appropriately along with the <th> elements of the second <tr> of the <thead>.

    While all the requirements were in the question I appear to have studiously misread the question, for reasons unknown. With the prompt, again, in comments below:

    I also want to delete the border between h4 and h5

    The approach here remains the same, but we use slightly more complex selectors by which to select the appropriate elements:

    /* 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.