Comment utiliser un tableau en HTML pour obtenir l'effet de bordure td (code)
不言
Libérer: 2018-07-16 10:56:37
original
4827 Les gens l'ont consulté
Aujourd'hui, j'aimerais partager avec vous un article sur l'implémentation de divers effets de bordure dans les tableaux HTML. Le contenu présente principalement les différentes opérations d'utilisation des tableaux pour définir des bordures en HTML. Les amis dans le besoin peuvent s'y référer.
table width=1 définit déjà la largeur sur 1 Le problème auquel nous sommes confrontés est le suivant, chaque ligne latérale td mesure 1 px et la ligne latérale de la table mesure également 1 px. Ensuite, lorsque deux td sont adjacents, parce que chaque ligne latérale td vaut 1, la "somme des largeurs" des lignes latérales lorsqu'elles entrent est 1+1=2. Même chose lorsque td et table sont adjacents.
effondrement : les bords adjacents sont fusionnés
Les bords adjacents sont fusionnés ! Ce que j'ai dit auparavant, c'est 1+1=2 à cause du problème des arêtes adjacentes entre td et td, et entre td et table. Par défaut, les arêtes adjacentes ne sont pas fusionnées.
1+1=2. Nous utilisons maintenant border-collapse:collapse pour les fusionner, donc la largeur est toujours de 1 px. C'est-à-dire qu'une fine bordure apparaît
Il existe généralement plusieurs façons de définir la fine bordure du tableau :
1 Définissez la BORDER=0, de la bordure. cellpacing=1, définissez la couleur d'arrière-plan du tableau sur la couleur de bordure souhaitée, puis définissez la couleur d'arrière-plan de tous les td sur blanc, afin que les fines bordures soient révélées. Cette méthode est un peu diabolique et peut ne pas paraître authentique, mais elle peut quand même donner des résultats.
Regardons la deuxième méthode :
2. Set BORDER=0 , puis ajoutez 1px border-top et border-left au tableau via CSS, puis définissez la bordure droite et la bordure inférieure de tous les TD, afin que l'effet souhaité puisse être obtenu. On voit que CSS est très puissant.
En pratique aujourd'hui, j'ai constaté que le HTML généré par les deux méthodes ci-dessus présente des problèmes lorsqu'il est ouvert dans Word et ne peut pas obtenir les résultats escomptés. Ce qu'il faut faire! ?
Ce qui suit est une méthode plus simple et plus efficace :
3 Définissez le CSS du tableau sur {border-collapse:collapse;border:none;}, puis définissez le CSS de td sur {border:solid #000 1px;}, et vous avez terminé ! Et Word peut également reconnaître ce paramètre.
La troisième méthode est la meilleure. J'ai également trouvé cette solution lorsque de nombreux CSS échouaient lors de l'exportation de Word !
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