Maison  >  Article  >  interface Web  >  Comment afficher la bordure de td lors de la production d'une page vide_HTML/Xhtml_Web

Comment afficher la bordure de td lors de la production d'une page vide_HTML/Xhtml_Web

WBOY
WBOYoriginal
2016-05-16 16:43:531152parcourir

J'ai déjà résumé comment utiliser CSS pour obtenir l'effet de bordure clair et sombre de la bordure du tableau, bordercolordark, bordercolorlight, puis un internaute m'a demandé pourquoi il avait écrit un style CSS similaire, mais l'effet de bordure du tableau ne peut être vu que normalement sous Opera et sous IE Ensuite, il n'y a rien.
J'ai téléchargé Opera 9 et j'ai vu que c'était bien 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 la cellule ne sera pas affiché. Opera Indépendamment ; Qu'il y ait du contenu ou non, les styles sont toujours utilisés pour le rendu. J'ai rencontré ce problème juste après avoir obtenu mon diplôme. Le chef de section du département de l'époque est venu me demander. Plus tard, je lui ai dit : ajoutez-le simplement à chaque TD vide. Chaque fois que je rencontrerai ce problème à l'avenir, j'utiliserai ce moyen simple, brut et efficace pour le résoudre.
Mais aujourd'hui, j'ai fait beaucoup de recherches et j'ai appris de Jiarry que la syntaxe CSS originale nous permet de modifier ces comportements par défaut : using border-collapse:collapse; et empty-cells:show;
class="test1": add border-collapse:collapse;
.test1{
border:1px solid #999999;
border-collapse:
width:60%
}
.test1 td{
border-bottom:1px solid #999999;
height:28px;
padding-left:6px
}
class1 Il y a du contenu ici
Il y a du contenu ici
class="test2": add border-collapse:collapse; et empty-cells:show
.test2{
border:1px solid black; :collapse ;
width:60%
}
.test2 td{
border-bottom:1px solid black; >empty -cells:show;
}
class2 Il y a du contenu ici
Il y a du contenu ici
class="test3": Sans ajouter border-collapse:collapse;
.test3{
border:1px solid #999999;
width:60%
}
.test3 td{
border-bottom:1px solid #999999; : 28px;
padding-left:6px
}
class3 Contenu ici
Contenu ici

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn