CSS：如何无抖动切换指定表格列边框且不影响其他列

解决方案 #

完全可以，核心是用不改变元素盒模型的视觉装饰属性模拟边框，避免触发浏览器重排（这就是抖动的根源）。下面提供两种可行方案：

方案1：用box-shadow模拟边框 #

box-shadow属于视觉层属性，不会占据布局空间，切换时只会触发重绘而非重排，彻底消除抖动。

修改后代码：

HTML（给目标列单元格加统一类）

<table id="table">
  <thead>
    <tr>
      <th>h1</th> <th class="target-col">h2</th> <th>h3</th> <th>h4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>11</td> <td class="target-col">12</td> <td>13</td> <td>14</td>
    </tr>
    <tr>
      <td>21</td> <td class="target-col">22</td> <td>23</td> <td>24</td>
    </tr>
  </tbody>
</table>
<br>
<button id="btn" onclick="toggleBorders()">Click Me!</button>

CSS

table {
  border-collapse: collapse;
}

/* 初始状态：给单元格预留内边距，避免阴影覆盖内容 */
th.target-col,
td.target-col {
  padding: 4px 6px; /* 左右多留3px空间对应阴影宽度 */
}

/* 切换状态：用内阴影模拟左右边框 */
th.target-col.thick-border,
td.target-col.thick-border {
  box-shadow: inset 3px 0 0 coral, inset -3px 0 0 coral;
}

JavaScript（简化选择逻辑）

function toggleBorders() {
  document.querySelectorAll('.target-col').forEach(el => el.classList.toggle('thick-border'));
}

方案2：用线性渐变模拟边框 #

利用background-image的线性渐变绘制左右边框，同样不影响布局，无抖动。

修改后CSS（HTML和JS同方案1）

table {
  border-collapse: collapse;
}

th.target-col,
td.target-col {
  padding: 4px 6px; /* 预留边框显示空间 */
  background-repeat: no-repeat;
  background-size: 3px 100%; /* 边框宽度和高度 */
  background-position: left center, right center;
}

th.target-col.thick-border,
td.target-col.thick-border {
  background-image: linear-gradient(coral, coral), linear-gradient(coral, coral);
}

方案原理 #

原代码的抖动是因为添加border会改变单元格的实际宽度，触发浏览器重新计算整个表格的布局（重排）。而box-shadow和线性渐变都属于纯视觉装饰，不会修改元素的盒模型尺寸（宽度、内边距等），切换时只需要更新像素渲染（重绘），完全不会影响其他列的初始布局。

内容的提问来源于stack exchange，提问作者DZN