Ligne du tableau de contour sur le vol stationnaire

Question

J'essaie de mettre en évidence la bordure d'une rangée de table en stationnaire. Malheureusement, cela ne fonctionne que pour la première rangée de cellules. Les lignes inférieures ont une bordure qui ne change pas de couleur. J'ai essayé d'utiliser outline mais il ne joue pas bien avec :hover dans webkit.

http://jsfiddle.net/S9pkM/2/

Imaginez votre code html table standard. Quelques trs avec quelques td. Planer sur une rangée devrait mettre en évidence sa bordure en rouge. Je suis ouvert à d'autres approches, mais je suis coincé avec la structure de la table. Pas d'insertion de html supplémentaire en plus de la norme <table> <tr> <td>

Answer 1

J'ai été confronté à ce même problème et a finalement trouvé une solution plus simple here.

Vous pouvez utiliser cette astuce CSS (border-style: double;) qui fonctionne pour 1px frontières:

#mytable tr.row:hover td 
{ 
    border-style: double; 
    border-color: red; 
} 

Cela rendra votre travail border-color (être le plus haut sommet d'un) peu importe. :-)

Answer 2

pourquoi ne pas utiliser une bordure séparée? http://jsfiddle.net/S9pkM/6/

Answer 3

Pour les bordures 1px, voir la solution de Leniel utilisant border-style: double. C'est beaucoup plus simple. Une double bordure est une qui montre une ligne 1px pour les bords intérieurs et extérieurs de la frontière. Cela ne fait rien pour une frontière 1px, mais sur> 1px il y a un écart. Pour les bordures> 1px, supprimez la bordure inférieure pour tous les <td> avec border-bottom: 0. Les bords supérieurs des autres cellules garderont tout comme ils devraient, sauf pour la dernière rangée. La dernière rangée nous réparons avec tr:last-child td { border-bottom: your border style }. Enfin, dans votre pseudo-aléatoire hover, vous définissez la bordure inférieure.

http://jsfiddle.net/S9pkM/16/

table { border-collapse: collapse; } /*I am aware of separate */ 
table td { border: 1px solid black; width: 50px; height: 25px; padding: 5px; border-bottom: 0; } 
table tr:last-child td { border-bottom: 1px solid black; } 
table tr:hover td { border-top-color: red; border-bottom: 1px solid red; } 
table tr:hover td:first-child { border-left-color: red; } 
table tr:hover td:last-child { border-right-color: red; } 

Answer 4

Il suffit de mettre ce code dans votre section de tête:

<style> 
    table td { border: 2px solid transparent; width: 50px; height: 50px; padding: 5px 5px 5px 5px;} 
    table td:hover {border:2px solid red; } 
</style>