透明表格单元格边框会覆盖下一个表格单元格的边框颜色

Question

我正在努力通过点击更改突出显示的表格列。目前突出显示由<td>的5px边框完成。当应用于列内容的边界改变了导致不良用户体验的内容。我试图通过为所有<td>添加透明边框来避免这种转变。 问题如下：<td>透明边框会覆盖下一个<td>突出显示的边框规则。

我尝试使用border-collapse: separate; border-spacing: 0;，但水平边框与垂直突出显示的边框重叠（不可接受）：

这里我添加了代码示例 - 点击列更改突出显示，点击按钮切换内容抖动问题与透明度问题

$('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

为避免内容移动，您可以使用that trick突出显示表格列。

只需将其设计更改为左边框和左边框。右。

＆＃13;

＆＃13;

$('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');
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;