J’ai une table de 3 par 3. J’ai besoin d’un moyen pour append une bordure au bas de chaque ligne et lui donner une couleur spécifique.
J’ai d’abord essayé la voie directe, à savoir:
Mais ça n’a pas marché. J’ai donc ajouté CSS comme ceci:
tr { border-bottom: 1pt solid black; }
Cela n’a toujours pas fonctionné.
- Débogueur de type Firebug pour Google Chrome
- Des recommandations pour un minificateur CSS?
- Comment créer une page HTML dans une ou plusieurs pages de format A4?
- Comment écrire: condition de vol stationnaire pour a: avant et a: après?
- Comment placer deux divs l’un à côté de l’autre?
Je préférerais utiliser CSS car alors je n’ai pas besoin d’append un atsortingbut de style
à chaque ligne. Je n’ai pas ajouté d’atsortingbut border
à la
. J’espère que cela n’affecte pas mon CSS.
- Est-ce que “display: none” empêche le chargement d’une image?
- Comment faire des enfants flexbox 100% de la taille de leur parent?
- MVC4 StyleBundle ne résout pas les images
- Barre de défilement personnalisée en CSS
- CSS3 Transparence + Dégradé
J’ai eu un problème comme ça avant. Je ne pense pas que tr
puisse prendre un style de frontière directement. Ma solution de contournement consistait à td
les td
s dans la ligne:
CSS:
tr.border_bottom td { border-bottom:1pt solid black; }
Ajouter une border-collapse:collapse
à votre règle de table:
table { border-collapse: collapse; }
Lien
Utiliser border-collapse:collapse
border-bottom: 1pt solid black;
sur la table et la border-bottom: 1pt solid black;
sur le tr
Utilisation
border-collapse:collapse
comme Nathan l’a écrit et vous devez définir
td { border-bottom: 1px solid #000; }
Il y a beaucoup de réponses incomplètes ici. Comme vous ne pouvez pas appliquer une bordure à la balise tr
, vous devez l’appliquer aux balises td
ou th
comme suit:
td { border-bottom: 1pt solid black; }
Faire cela laissera un petit espace entre chaque td
, ce qui n’est probablement pas souhaitable si vous voulez que la bordure apparaisse comme si elle était la balise tr
. Afin de “combler les lacunes” pour ainsi dire, vous devez utiliser la propriété border-collapse
sur l’élément table
et définir sa valeur pour la collapse
, comme ceci:
table { border-collapse: collapse; }
Affichez la ligne sous forme de bloc.
tr { display: block; border-bottom: 1px solid #000; }
et pour afficher simplement d’autres couleurs:
tr.oddrow { display: block; border-bottom: 1px solid #F00; }
Utilisation
table{border-collapse:collapse} tr{border-top:thin solid}
Remplacez “thin solid” par des propriétés CSS.
J’ai trouvé lors de l’utilisation de cette méthode que l’espace entre les éléments td provoquait un écart dans la bordure, mais sans crainte …
Un moyen de contourner cela:
Example of normal table data /* insert nothing in here */
Avec le CSS:
td.end{ border:2px solid black; }
Vous pouvez faire la même chose sur toute la ligne.
Il existe un border-bottom-style
, border-bottom-style
border-top-style
, border-top-style
border-left-style
, border-left-style
border-right-style
. Ou simplement un border-style
qui s’applique aux quatre frontières à la fois.
Vous pouvez voir (et essayer en ligne) plus de détails ici
Vous ne pouvez pas mettre une bordure sur un élément tr. Cela a fonctionné pour moi dans Firefox et IE 11:
Une autre solution à ce problème est la propriété d’ border-spacing
:
table td { border-bottom: 2px solid black; } table { border-spacing: 0px; }
ABC XYZ
HTML
CSS
tr.bottom-border { border-bottom: 1px solid #222; }
- Taille de police réactive
- Comprendre offsetWidth, clientWidth, scrollWidth et -Height, respectivement
- Image d’arrière-plan CSS pour s’adapter à la largeur, la hauteur devrait s’auto-échelle en proportion
- Superscript en CSS uniquement?
- Je ne veux pas hériter de l’opacité enfant du parent en CSS
- CSS Box Shadow Bottom Only
- Masquer le texte en utilisant css
- Comment puis-je rendre une entrée de texte non modifiable?
- Que signifie le smiley “:)” en CSS?
- Taille de l’image CSS, comment remplir, pas étirer?