Color de borde de fila de tabla CSS con borde-contraer

He visto varias publicaciones aquí sobre el tema, y ​​he leído la especificación W3C sobre resolución de conflictos de estilo de borde (y admito, no lo entiendo completamente), y no estoy seguro de cómo lograr lo que quiero .

En la hover fila, quiero cambiar el color del borde alrededor de la fila. Supuse que la mejor manera de hacerlo en todos los navegadores es cambiar los colores del borde td en esa fila. Sin embargo, parece que no puedo ejecutarlo de una manera en la que también cambie el borde superior de la fila.

Aquí está mi 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;} 

y mi 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'); }); 

En primer lugar, es mejor que no utilices jQuery y, en su lugar, utilices CSS puro:

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

A continuación, ya que estás usando bordes de 1px, prueba este truco:

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

Como el double es “más distinto” que el solid , su color tiene prioridad sobre las celdas que lo rodean, y de todos modos se ve idéntico al solid 😉

    Intereting Posts