Comment ajouter le rayon de la frontière sur la ligne de la table

Question

Est-ce que quelqu'un sait comment coiffer tr comme nous aimons?

J'ai utilisé border-collapse sur la table, après que les tr puissent afficher une bordure solide de 1px que je leur donne.

Cependant, lorsque j'ai essayé -moz-border-radius , cela ne fonctionne pas. Même une simple marge ne fonctionne pas.

Answer 1

Vous pouvez uniquement appliquer border-radius à td, pas tr ou table. J'ai utilisé ce style pour les tables d'angle arrondies:

 table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }
 

Assurez-vous de fournir tous les préfixes du fournisseur. En voici un exemple en action .

Answer 2

Réelle De L'Espacement Entre Les Lignes

C'est un vieux thread, mais j'ai remarqué en lisant les commentaires de l'OP sur d'autres réponses que l'objectif initial était apparemment avoir border-radius sur les lignes et les espaces entre les lignes. Il ne semble pas que les solutions actuelles exactement faire. theazureshadow la réponse est dans la bonne direction, mais semble avoir besoin d'un peu plus.

Pour les personnes intéressées dans de tels, ici, c'est un violon qui ne séparent les lignes et applique le rayon de chaque ligne. (NOTE: Firefox a actuellement un bug dans l'affichage/écrêtage background-color à la frontière des rayons.)

Le code est comme suit (et comme theazureshadow noté, plus anciennes de la prise en charge du navigateur, les différents fournisseurs de préfixes pour border-radius besoin ajoutée).

table { 
    border-collapse: separate; 
    border-spacing: 0 10px; 
    margin-top: -10px; /* correct offset on first border spacing if desired */
}
td {
    border: solid 1px #000;
    border-style: solid none;
    padding: 10px;
    background-color: cyan;
}
td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px;
}
td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px; 
}

Answer 3

Informations sur les bonus: border-radius n'a aucun effet sur les tables avec border-collapse: collapse; et la bordure définie sur td . Et peu importe si border-radius est défini sur table , tr ou td il est ignoré.

http://jsfiddle.net/Exe3g/

Answer 4

Selon Opera, le standard CSS3 ne définit pas l'utilisation de border-radius sur les TD. D'après mon expérience, Firefox et Chrome le prennent en charge, contrairement à Opera (je ne connais pas IE). La solution consiste à envelopper le contenu td dans un div, puis à appliquer les border-radius à la div.

Answer 5

Je pense que l'effondrement des frontières, est la mauvaise chose à faire dans ce cas. Réduire fondamentalement signifie que la frontière entre les deux cellules voisines devient partagée. Cela signifie qu'il est difficile de savoir à la direction qu'il doit courbe d'un rayon.

Au lieu de cela, vous pouvez donner un border radius pour les deux de gauche coins de la première de TD et les deux de droite coins de la dernière. Vous pouvez utiliser first-child et last-child sélecteurs comme suggéré par theazureshadow, mais ceux-ci peuvent être mal supportés par les anciennes versions d'IE. Il pourrait être plus facile de définir des classes, comme .first-column et .last-column pour servir à cette fin.