Html Question posted in
Some basic documentation can be found here.

Html – CSS: How to toggle the borders of a specific table column without twitching

function toggleBorders() {
  table.tHead.firstElementChild.children[1].classList.toggle('thick-border');
  Array.from(table.tBodies[0].children).forEach(row => row.children[1].classList.toggle('thick-border'));
}
table {
  border-collapse: collapse;
}

th.thick-border,
td.thick-border {
  border: 3px solid coral;
  border-top: none;
  border-bottom: none;
}
<table id="table">
  <thead>
    <tr>
      <th>h1</th> <th>h2</th> <th>h3</th> <th>h4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td> <td>12</td> <td>13</td> <td>14</td>
    </tr>
    <tr>
      <td>21</td> <td>22</td> <td>23</td> <td>24</td>
    </tr>
  </tbody>
</table>
<br>
<button id="btn" onclick="toggleBorders()">Click Me!</button>

Is there any way to toggle the column’s borders without twitching?
And without thickening initial border width of other columns?

Maybe with shadows or gradients or somehow else

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    Well and one more solution with pseudo-elements ::before and ::after

    function toggleBorders() {
  table.tHead.firstElementChild.children[1].classList.toggle('thick-border');
  Array.from(table.tBodies[0].children).forEach(row => row.children[1].classList.toggle('thick-border'));
}
    table {
  border-collapse: collapse;
}

th.thick-border,
td.thick-border {
    position: relative;
    &::before,
    &::after {
        content: '';
        position: absolute;
        display: block;
        top: 0;
        left: -1px;
        width: 3px;
        height: calc(100% + 2px);
        background: red;
    }
    &::after {
        left: unset;
        right: -1px;
    }
}
    <table id="table">
  <thead>
    <tr>
      <th>h1</th> <th>h2</th> <th>h3</th> <th>h4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td> <td>12</td> <td>13</td> <td>14</td>
    </tr>
    <tr>
      <td>21</td> <td>22</td> <td>23</td> <td>24</td>
    </tr>
  </tbody>
</table>
<br>
<button id="btn" onclick="toggleBorders()">Click Me!</button>


  2. 0

    You may want to use a transparent border to begin with:

    function toggleBorders() {
  table.tHead.firstElementChild.children[1].classList.toggle('thick-border');
  Array.from(table.tBodies[0].children).forEach(row => row.children[1].classList.toggle('thick-border'));
}
    table {
  border-collapse: collapse;
}

th, td {
  border: 3px solid transparent;
  border-top: none;
  border-bottom: none;
}

th.thick-border,
td.thick-border {
  border: 3px solid coral;
  border-top: none;
  border-bottom: none;
}
    <table id="table">
  <thead>
    <tr>
      <th>h1</th> <th>h2</th> <th>h3</th> <th>h4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td> <td>12</td> <td>13</td> <td>14</td>
    </tr>
    <tr>
      <td>21</td> <td>22</td> <td>23</td> <td>24</td>
    </tr>
  </tbody>
</table>
<br>
<button id="btn" onclick="toggleBorders()">Click Me!</button>
    Login or Signup to reply.
  3. 0

    You can use a box-shadow on either side instead.

     box-shadow: 2px 0px 0px coral, -2px 0px 0px coral;

    2px / -2px extends it to the right / left, 0px offset on the y-axis, and 0px blur radius.

    function toggleBorders() {
  table.tHead.firstElementChild.children[1].classList.toggle('thick-border');
  Array.from(table.tBodies[0].children).forEach(row => row.children[1].classList.toggle('thick-border'));
}
    table {
  border-collapse: collapse;
}

th.thick-border,
td.thick-border {
  box-shadow: 2px 0px 0px coral, -2px 0px 0px coral;
}
    <table id="table">
  <thead>
    <tr>
      <th>h1</th> <th>h2</th> <th>h3</th> <th>h4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td> <td>12</td> <td>13</td> <td>14</td>
    </tr>
    <tr>
      <td>21</td> <td>22</td> <td>23</td> <td>24</td>
    </tr>
  </tbody>
</table>
<br>
<button id="btn" onclick="toggleBorders()">Click Me!</button>
    Login or Signup to reply.
  4. 0

    Since you were looking to style exactly the second column of the given table, I think it would be more readable if you defined such feature in stylings instead of using the convoluted javascript code you engaged in your own demo.

    Here I just switched to border-collapse: separate to keep showing the cells right and left borders as styled and used an explicit css rule so that the whole table when having the class thick-border will be styled as that.

    That way you just need to toggle the class on the table alone instead of each single cell of the target column.

    function toggleBorders() {  
  document.getElementById('table').classList.toggle('thick-border');    
}
    table {
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {  
  border-width: 0 3px;  
  border-style: solid;
  border-color: transparent;
}

table.thick-border tbody tr td:nth-child(2){
  border-color: coral;
}
    <table id="table">
  <thead>
    <tr>
      <th>h1</th>
      <th>h2</th>
      <th>h3</th>
      <th>h4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>14</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
      <td>23</td>
      <td>24</td>
    </tr>
  </tbody>
</table>
<br>
<button id="btn" onclick="toggleBorders()">Click Me!</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search