能否跨多个TR为HTML表格中的多个TD添加单个DIV或SPAN？

不行，HTML表格的结构规则不允许跨多个<tr>标签用单个<div>或<span>包裹<td>元素。因为<table>的合法直接子元素只能是<tr>（或<thead>、<tbody>、<tfoot>），而<tr>的合法子元素只能是<td>或<th>，跨行包裹会破坏表格的DOM结构，导致浏览器解析异常。

下面提供两种可行的实现方案，通过JavaScript和CSS实现目标TD组的高亮边框效果：

方案一：给目标TD添加类名，用CSS组合边框 #

这种方法符合HTML规范，通过给需要高亮的TD统一添加类名，再用CSS设置分段边框，视觉上形成整体高亮效果。

步骤1：标记目标TD（或用JS动态添加类） #

如果是静态HTML，可以直接给目标TD加类：

<table>
  <tr>
     <td></td>
     <td class="highlight-col"></td>
  </tr>
  <tr>
     <td></td>
     <td class="highlight-col"></td>
  </tr>
</table>

如果需要动态选中（比如第二列的所有TD），用JavaScript添加类：

// 选中表格中第二列的所有TD
const targetTDs = document.querySelectorAll('table tr td:nth-child(2)');
targetTDs.forEach(td => td.classList.add('highlight-col'));

步骤2：编写CSS样式 #

/* 确保表格边框合并，避免缝隙 */
table {
  border-collapse: collapse;
}

/* 给所有目标TD设置左右边框 */
.highlight-col {
  border-left: 2px solid #ff4444;
  border-right: 2px solid #ff4444;
}

/* 给第一个目标TD加顶部边框 */
.highlight-col:first-of-type {
  border-top: 2px solid #ff4444;
}

/* 给最后一个目标TD加底部边框 */
.highlight-col:last-of-type {
  border-bottom: 2px solid #ff4444;
}

方案二：用绝对定位伪元素模拟整体边框 #

如果希望视觉上完全像一个单独的包裹框，可以利用表格的相对定位，通过伪元素生成一个覆盖目标列的边框，适合布局固定的表格。

CSS代码： #

table {
  position: relative;
  border-collapse: collapse;
}

/* 生成跨行的高亮边框 */
table::after {
  content: '';
  position: absolute;
  /* 根据实际列宽调整left和width的值 */
  left: 120px; /* 第一列的宽度 */
  width: 180px; /* 目标列的宽度 */
  top: 0;
  bottom: 0;
  border: 2px solid #ff4444;
  pointer-events: none; /* 避免边框遮挡TD的点击事件 */
}

这种方法不需要修改TD的DOM结构，直接通过定位实现视觉效果，但需要提前知道列的宽度，若列宽动态变化，需要用JavaScript实时计算并调整伪元素的位置和宽度。

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