如何修复两个表格间点击触发箭头的响应式布局问题？

我来帮你搞定这个箭头的响应式适配问题！目前你的箭头位置是基于表格固定宽度计算的，一旦屏幕尺寸变化（比如缩小到移动端），表格宽度跟着自适应，箭头自然就跑偏了。咱们可以通过调整定位逻辑和CSS来彻底解决：

第一步：调整容器定位与箭头样式 #

先给左侧表格所在的列容器加上相对定位，让箭头的定位参考这个容器（而非整个页面），再修改箭头的CSS规则，让它始终贴在容器右侧并垂直居中：

/* 给左侧列容器添加相对定位，作为箭头的定位参考 */
.left-col {
  position: relative;
}

#output {
  position: absolute;
  visibility: hidden;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 14px solid yellow;
  /* 箭头刚好贴在容器右侧，向外延伸 */
  right: -14px;
  /* 垂直居中对齐点击的行 */
  transform: translateY(-50%);
}

/* 小屏幕下（表格堆叠时）隐藏箭头，避免显示混乱 */
@media (max-width: 767px) {
  #output {
    display: none !important;
  }
}

第二步：修改JavaScript定位逻辑 #

不再依赖表格宽度计算绝对位置，而是计算点击元素相对于左侧容器的垂直偏移，这样不管屏幕怎么缩放，箭头都能精准对齐点击的行：

$(document).ready(function() {
  $('a.datalink').click(function () {
    const $leftContainer = $('.left-col');
    // 计算点击元素相对于左侧容器的垂直中心位置
    const elementRelativeTop = $(this).offset().top - $leftContainer.offset().top + $(this).outerHeight()/2;
    $('#output').css('top', elementRelativeTop + 'px');
    $("#output").css('visibility','visible');
  });
});

第三步：给左侧容器添加类名 #

在左侧的col-lg-6 col-md-6容器上加上left-col类，方便CSS和JS精准选择：

<div class="col-lg-6 col-md-6 left-col">
  <!-- 左侧表格内容不变 -->
</div>

为什么这样改？ #

• 相对定位的容器让箭头的定位永远绑定左侧表格的父容器，不管容器宽度怎么自适应，箭头都能牢牢贴在右侧。
• transform: translateY(-50%)自动实现垂直居中，不用手动计算行高。
• 媒体查询在小屏幕下隐藏箭头，避免两个表格上下堆叠时箭头出现在不合理的位置。

修改后的完整代码 #

<html>
<style>
.left-col {
  position: relative;
}

#output {
  position: absolute;
  visibility: hidden;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 14px solid yellow;
  right: -14px;
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  #output {
    display: none !important;
  }
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<body>
<div class="col-lg-6 col-md-6 left-col">
<table id="mTable" class="table table-hover table-bordered table-sieve" >
<thead><th >Name</th><th >Department</th></thead>
<tbody>
<tr>
<td ><span style="cursor:default"><a id="showdata" class="datalink" detail="Cell: #emp_cell# "> #emp_namefirst#</a></span></td>
<td >#dept_name# </td>
</tr>
<tr>
<td ><span style="cursor:default"><a id="showdata" class="datalink" detail="Cell: #emp_cell# "> #emp_namefirst#</a></span></td>
<td >#dept_name# </td>
</tr>
<tr>
<td ><span style="cursor:default"><a id="showdata" class="datalink" detail="Cell: #emp_cell# "> #emp_namefirst#</a></span></td>
<td >#dept_name# </td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-6 col-md-6 ">
<table id="mTable" class="table table-hover table-bordered table-sieve" >
<thead><th >Name</th><th >Department</th></thead>
<tbody>
<tr>
<td ><span style="cursor:default"><a id="showdata" class="datalink" detail="Cell: #emp_cell# "> #emp_namefirst#</a></span></td>
<td >#dept_name# </td>
</tr>
<tr>
<td ><span style="cursor:default"><a id="showdata" class="datalink" detail="Cell: #emp_cell# "> #emp_namefirst#</a></span></td>
<td >#dept_name# </td>
</tr>
<tr>
<td ><span style="cursor:default"><a id="showdata" class="datalink" detail="Cell: #emp_cell# "> #emp_namefirst#</a></span></td>
<td >#dept_name# </td>
</tr>
</tbody>
</table>
</div>
<div id="output"></div>
<script>
$(document).ready(function() {
$('a.datalink').click(function () {
    const $leftContainer = $('.left-col');
    const elementRelativeTop = $(this).offset().top - $leftContainer.offset().top + $(this).outerHeight()/2;
    $('#output').css('top', elementRelativeTop + 'px');
    $("#output").css('visibility','visible');
});
});
</script>
</body>
</html>

这样修改后，箭头会自适应所有屏幕尺寸，始终精准对齐点击的行，小屏幕下还会自动隐藏，完美解决响应式问题！

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