J'ai résumé comment utiliser CSS pour atteindre la lumière de la bordure et l'effet sombre de la bordure de la table + BorderColordark + BorderColorlight. Ensuite, un internaute m'a demandé pourquoi il avait écrit un style CSS similaire, mais il ne pouvait voir que l'effet de la frontière de la table normalement sous l'opéra, et il n'y avait rien sous IE.
Je suis descendu de l'Opera9 et j'ai vu que c'était en effet le cas. La raison n'est pas compliquée: car sous IE (Firefox semble être cohérent avec IE), si le contenu d'un TD est vide, même si vous définissez la hauteur et la largeur, le style de bordure de cette cellule ne sera pas affiché; Opera utilisera le style pour rendre ou non le contenu. Cette question a été rencontrée lorsque j'ai obtenu mon diplôme. Le chef de département est venu me demander à ce moment-là, et plus tard je lui ai dit: l'ajoutez simplement à tous les TD vides. Chaque fois que je rencontre ce problème à l'avenir, j'utiliserai cette méthode simple, brute et efficace pour la résoudre.
Mais aujourd'hui, j'ai fait de mon mieux pour l'étudier plusieurs fois, et à partir du jiarry, je savais que la syntaxe CSS nous a permis de modifier ces comportements par défaut: en utilisant le recul de la frontière: effondrement; et les cellules vides: show; Pour faire apparaître la frontière disparue.
Class = test1: Ajouter un effondrement de la bordure: effondrement;
.test1 {
Border: 1px solide # 999999;
Border-Collapse: s'effondrer;
Largeur: 60%
}
.test1 td {
Border-Bottom: 1px solide # 999999;
hauteur: 28px;
padding-gauche: 6px;
}
classe1 Il y a du contenu ici
Il y a du contenu ici
Class = test2: Ajouter un effondrement de la bordure: effondrement; et les cellules vides: show;
.test2 {
Border: 1px noir solide;
Border-Collapse: s'effondrer;
Largeur: 60%
}
.test2 td {
Border-Bottom: 1px noir solide;
hauteur: 28px;
padding-gauche: 6px;
Cellules vides: show;
}
La classe2 a du contenu ici
Il y a du contenu ici
classe = test3: sans bordure de bordure: effondrement; et les cellules vides: show;
.test3 {
Border: 1px solide # 999999;
Largeur: 60%
}
.test3 td {
Border-Bottom: 1px solide # 999999;
hauteur: 28px;
padding-gauche: 6px;
}
La classe3 a du contenu ici
Il y a du contenu ici