Transparent table-cell border overrides border-color for next table-cell

Question

I'm working on changing highlighted table column by click. Currently highlight is done by 5px borders for <td>. When the border applied to the column content shifts what gives bad UX. I'm trying to avoid that shifting by adding transparent borders to all <td>. Here's the issue: <td> transparent border overrides highlighted border rule for the next <td>.

I tried using border-collapse: separate; border-spacing: 0; but horizontal borders overlap the vertical highlighted border (NOT ACCEPTABLE):

here I added code sample - click on column to change highlight, click on button to toggle content shake issue vs transparency issue

$('td').click(function() {
  //$(this).toggleClass('checkmark-on');
  var index = $(this).index();
  if (index !== 0) {
    $(this).closest('table')
      .attr('class', '')
      .addClass('selected-col-' + index);
  }
});

var transparencyOn = false;
$('#transparencyToggle').click(function() {
  $('tbody').toggleClass('transparency-demo');
  transparencyOn = !transparencyOn;
  if(transparencyOn){
    $(this).text('Show content shake issue');
  } else {
   $(this).text('Show transparent border issue');
  }
});

* {
  font-family: Arial;
}

body{
padding: 20px;
}

.selected-col-2 tr *:nth-child(3),
.selected-col-1 tr *:nth-child(2),
.selected-col-3 tr *:nth-child(4) {
  border-left: 5px solid #1fa3ff !important;
  border-right: 5px solid #1fa3ff !important
}

.selected-col-2 tr:nth-child(1) *:nth-child(3),
.selected-col-1 tr:nth-child(1) *:nth-child(2),
.selected-col-3 tr:nth-child(1) *:nth-child(4) {
  border-top: 5px solid #1fa3ff !important
}

.selected-col-2 tr:nth-last-child(1) *:nth-child(3),
.selected-col-1 tr:nth-last-child(1) *:nth-child(2),
.selected-col-3 tr:nth-last-child(1) *:nth-child(4) {
  border-bottom: 5px solid #1fa3ff !important
}

table {
  border-collapse: collapse;
  border: none;
  margin-top: 20px;
}

td,
th {
  padding: 20px;
}

tr:not(:first-child) {
  border-top: 1px solid #dedede;
}

tbody.transparency-demo td {
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

tbody.transparency-demo tr:first-child td {
  border-top: 5px solid transparent;
}

a {
  border: 1px solid #1fa3ff;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  margin: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id='transparencyToggle'>Show transparent border issue</a>

<table class='selected-col-2'>
  <tbody>

    <tr>
      <td>Row title 1</td>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <td>Row title 2</td>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <td>Row title 3</td>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <td>Row title 4</td>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
  </tbody>
</table>

Answer 1

To avoid content movements you can use that trick for highlighting table column.

Simply change the design of it to be border left & right.

$('td').click(function() {
  //$(this).toggleClass('checkmark-on');
  var index = $(this).index();
  if (index !== 0) {
    $(this).closest('table')
      .attr('class', '')
      .addClass('selected-col-' + index);
  }
});

var transparencyOn = false;
$('#transparencyToggle').click(function() {
  $('tbody').toggleClass('transparency-demo');
  transparencyOn = !transparencyOn;
  if (transparencyOn) {
    $(this).text('Show content shake issue');
  } else {
    $(this).text('Show transparent border issue');
  }
});

body {
  padding: 20px;
}

.selected-col-2 td:nth-child(3):after,
.selected-col-1 td:nth-child(2):after,
.selected-col-3 td:nth-child(4):after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-left: 5px solid #1fa3ff;
  border-right: 5px solid #1fa3ff;
  z-index: -1;
}

.selected-col-2 tr:first-child td:nth-child(3):after,
.selected-col-1 tr:first-child td:nth-child(2):after,
.selected-col-3 tr:first-child td:nth-child(4):after {
  border-top: 5px solid #1fa3ff;
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
}

.selected-col-2 tr:last-child td:nth-child(3):after,
.selected-col-1 tr:last-child td:nth-child(2):after,
.selected-col-3 tr:last-child td:nth-child(4):after {
  border-bottom: 5px solid #1fa3ff;
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}

table {
  border-collapse: collapse;
  border: none;
  margin-top: 20px;
  overflow: hidden;
}

td,
th {
  padding: 20px;
  position: relative;
}

tr:not(:first-child) {
  border-top: 1px solid #dedede;
}

tbody.transparency-demo td {
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}

tbody.transparency-demo tr:first-child td {
  border-top: 5px solid transparent;
}

a {
  border: 1px solid #1fa3ff;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  margin: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id='transparencyToggle'>Show transparent border issue</a>

<table class='selected-col-2'>
  <tbody>

    <tr>
      <td>Row title 1</td>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <td>Row title 2</td>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <td>Row title 3</td>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
    <tr>
      <td>Row title 4</td>
      <td>content</td>
      <td>content</td>
      <td>content</td>
    </tr>
  </tbody>
</table>