div模拟表格容器：hover时完整白边框实现方案求助

嘿，我完全懂你遇到的困扰——为了做出带圆角、边框均匀的div表格组件，你移除了非首尾容器的下边框，结果hover的时候没法让整个容器显示完整的白色边框，对吧？其实不用急着上JavaScript，纯CSS就能轻松解决，给你几个实用的方案：

方案一：透明边框替代零边框 #

把原本设置的border-bottom: 0改成透明边框，这样中间行的边框其实一直“存在”，只是看不见，hover时统一切换成白色即可：

/* 替换你原来的非首尾行样式 */
.table-row:not(:first-child):not(:last-child) {
  border-bottom: 1px solid transparent;
}

/* hover时给所有行设置白色边框 */
.table-container:hover .table-row {
  border-color: white;
}

这个方法完全保留了你原来的圆角布局，hover时所有边框会无缝衔接，视觉效果很自然。

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

如果不想改动原有边框设置，可以用内阴影来模拟完整边框，阴影不受元素自身边框状态的影响：

.table-container:hover {
  box-shadow: inset 0 0 0 1px white;
}

注意这里用inset内阴影，这样阴影会显示在容器内容和背景之间，看起来和真实边框一样。如果你的容器有背景色，这个方法适配性很强。

方案三：JavaScript方案（仅当纯CSS无法满足复杂需求时使用） #

如果确实需要用JS实现，思路就是在容器hover时给所有行添加一个统一的边框类，离开时移除：

const tableContainer = document.querySelector('.table-container');
const tableRows = tableContainer.querySelectorAll('.table-row');

tableContainer.addEventListener('mouseenter', () => {
  tableRows.forEach(row => row.classList.add('hover-full-border'));
});

tableContainer.addEventListener('mouseleave', () => {
  tableRows.forEach(row => row.classList.remove('hover-full-border'));
});

然后在CSS里定义这个类：

.hover-full-border {
  border-bottom: 1px solid white !important;
  /* 按需添加其他边框样式 */
}

不过还是更推荐前两种纯CSS方案，代码更简洁，性能也更好。

另外小建议：可以把圆角设置在最外层的.table-container上，而不是单独给首尾行设置，这样hover时整个容器的圆角和边框会更统一，避免出现边角衔接的问题。

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