Aperçu de la table de lignes sur le vol stationnaire
Je suis en train de mettre en évidence la frontière d'une ligne de tableau sur le vol stationnaire. Malheureusement, cela ne fonctionne que pour la première rangée de cellules. Lignes du bas ont une frontière qui ne change pas de couleur. J'ai essayé d'utiliser outline
mais cela ne veut pas jouer gentil avec :hover
dans webkit.
Imaginez votre table standard html. Certains tr avec certains de la td. Le survol d'une ligne doit mettre en évidence sa bordure rouge.
table { border-collapse: collapse; } /*I am aware of separate */
table td { border: 3px solid black; }
table tr:hover td { border-top-color: red; border-bottom-color: red; }
table tr:hover td:first-child { border-left-color: red; }
table tr:hover td:last-child { border-right-color: red; }
Je suis ouvert à d'autres approches, mais je suis coincé avec la structure de la table. Aucune insertion de html supplémentaire en plus de la norme <table> <tr> <td>
Je pense que c'est pas à cause de :hover. C'est la façon dont le tableau se comporte.
OriginalL'auteur mrtsherman | 2011-11-14
Vous devez vous connecter pour publier un commentaire.
J'ai été confronté à ce même problème et a finalement trouvé une solution plus simple ici.
Vous pouvez utiliser cette astuce CSS (
border-style: double;
) qui fonctionne pour 1px frontières:Cela rendra votre
border-color
travail (être le plus haut un) n'importe quoi. 🙂Hein! Est-ce parce que
double
fait une sorte de nouvel ordre d'empilement contexte de la création? Ou est-il quelque chose de plus sinistre?toute suggestion pour les lignes en pointillés border-style?
Cela fonctionne assez bien, sauf que les deux FF et Chrome semblent avoir rendu les bugs que de temps en temps de laisser la zone de bordure de couleur sur certains de la frontière après le décollage, a pris fin. La plupart se produit sur la dernière ligne et la dernière colonne de la table. N'a jamais réussi à contourner le rendu de bugs.
J'ai dû changer le sélecteur de
#mytable tr:hover td
pour que ça fonctionne, sinon, très sympa!OriginalL'auteur Leniel Maccaferri
Pour 1px frontières de voir Leniel la solution qui utilise
border-style: double
. C'est beaucoup plus simple. Une double bordure est celui qui montre un 1px ligne pour l'intérieur et l'extérieur des bords de la frontière. Ce n'est pas faire n'importe quoi pour un 1px frontière, mais on >1px il y a un fossé.Pour les bordures >1px vous supprimer la bordure du bas pour l'ensemble de la
<td>
's avecborder-bottom: 0
. Le top des frontières des autres cellules de tout garder à la recherche de la façon dont ils doivent, sauf pour la dernière ligne. La dernière ligne nous fixer avectr:last-child td { border-bottom: your border style }
. Enfin dans votre hover pseudoclass vous définissez la bordure du bas.http://jsfiddle.net/S9pkM/16/
OriginalL'auteur mrtsherman
pourquoi ne pas utiliser une autre de la frontière?
http://jsfiddle.net/S9pkM/6/
I am aware of separate.
je n'aime pas le look de la de différentes couleurs, les frontières de l'empilement sur le dessus les uns des autres.OriginalL'auteur bravedick
Viens de mettre ce code dans votre section d'en-tête:
OriginalL'auteur ravi