CSS表格边框颜色与边框折叠

我在这里看过几篇关于这个主题的post，我已经阅读了关于边界风格冲突解决的W3C规范（并且承认，我还没有完全理解它），而且我不确定如何实现我想要的。

在行hover时，我想更改行周围的边框颜色。 我推测最好的跨浏览器方式是改变该行中的td边框颜色。 但是，我似乎无法以行的顶部边框也发生变化的方式执行它。

这是我的CSS：

#dataGrid table { border: 1px solid #cacac8; /* I've tried it with and without this border setting */ table-layout: fixed; border-collapse: collapse; } #dataGrid td { border: 1px solid #cacac8; padding: 8px 11px 7px 11px; text-align: left; } #dataGrid .cellHovered { border-top: 1px solid #425474; border-bottom: 1px solid #425474; } #dataGrid .cellFirstHovered {border-left: 1px solid #425474;} #dataGrid .cellLastHovered {border-right: 1px solid #425474;} 

和我的JQuery：

 $('div#dataGrid tr.dataRow').hover( function () { $(this).children('td').addClass('cellHovered'); $(this).children('td:first').addClass('cellFirstHovered'); $(this).children('td:last').addClass('cellLastHovered'); }, function() { $(this).children('td').removeClass('cellHovered'); $(this).children('td:first').removeClass('cellFirstHovered'); $(this).children('td:last').removeClass('cellLastHovered'); }); 

Answer 1

首先，你最好不要使用jQuery而是使用纯CSS：

 #datagrid tr.datarow:hover td { border: whatever; } 

接下来，由于您使用的是1px边框，请尝试以下方法：

 #datagrid tr.datarow:hover td { border-style: double; } 

由于double是“更明显”然后是solid ，它的颜色优先于它周围的单元格，并且看起来与solid相同;）