Considérons un div
avec les atsortingbuts CSS border-radius
, border
et background-color
appliqués:
Blah
Considérons maintenant une disposition similaire mais avec la background-color
spécifiée dans une div interne:
Blah
Je suis consterné par le fait que la background-color
de background-color
du
externe .
Ceci est un exemple simplifié du problème. En réalité, j’utilise un
comme élément interne avec des couleurs de lignes alternées. Et j’utilise un
comme élément externe puisque border-radius
ne semble pas fonctionner sur l’élément
. Voici un exemple d’un échantillon de ce problème.
Quelqu’un at-il une suggestion pour une solution?
- WPF: Supprime la bordure en pointillés autour de l’élément ciblé dans la liste déroulante stylisée
- Contrôler la longueur de trait et la distance entre les traits
- Comment définir une bordure pour une balise HTML div
- Comment augmenter l’espace entre les points de bordure en pointillés
- Placer la bordure à l’intérieur de div et pas sur son bord
Essayez le overflow:hidden
dans la div
externe:
Ajoutez ces règles CSS:
tr:first-of-type td:first-child { border-top-left-radius: 5px; } tr:first-of-type td:last-child { border-top-right-radius: 5px; } tr:last-of-type td:first-child { border-bottom-left-radius: 5px; } tr:last-of-type td:last-child { border-bottom-right-radius: 5px; }
Voir le violon mis à jour.
Vous pouvez résoudre ce problème en appliquant un overflow: hidden;
à l’élément avec la bordure. Une façon beaucoup plus propre je pense.
Faut-il utiliser une table? Voici un exemple d’utilisation de DIV: http://jsfiddle.net/6KwGy/1/
HTML:
data 1
data 2
data 1
data 2
data 1
data 2
CSS:
.container { width: 100%; } .leftHalf { float:left; width:50%; } .rightHalf { float:left; width:50%; } .row { float: left; width: 100%; } #container .row:nth-child(odd) { background-color: #EEEEEE; } #container .row:first-child { border-top: 1px solid black; border-top-left-radius: 5px; border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -webkit-border-radius-topleft: 5px; -webkit-border-radius-topright: 5px; } #container .row:last-child { border-bottom: 1px solid black; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-radius-bottomleft: 5px; -webkit-border-radius-bottomright: 5px; } #container .row { border-left: 1px solid black; border-right: 1px solid black; }
Ajouter un remplissage ou faire la couleur d’arrière-plan sur l’élément externe
Serait-il acceptable de donner un peu de rembourrage au div? De cette façon, les couleurs de fond ne seraient pas en conflit.
Vous pouvez également append border-radius à l’élément enfant.
Blah