Comment ajouter un rayon de bordure sur la ligne du tableau

Est-ce que quelqu'un sait comment le coiffer comme on aime?

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

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

Vous ne pouvez appliquer border-radius qu'à td, pas à tr ou table. J'ai contourné cela pour les tables d'angle arrondies en utilisant ces styles:

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 de fournisseur. En voici un exemple en action .

Espacement réel entre les lignes

Ceci est un vieux fil, mais j'ai remarqué la lecture des commentaires du PO sur d'autres réponses que l'objectif initial était apparemment d'avoir border-radiussur les lignes, et les écarts entre les lignes. Il ne semble pas que les solutions actuelles fassent exactement cela. La réponse de theazureshadow va dans la bonne direction, mais semble avoir besoin d'un peu plus.

Pour ceux qui s'y intéressent, voici un violon qui sépare les lignes et applique le rayon à chaque ligne. (REMARQUE: Firefox a actuellement un bogue dans l'affichage / le découpage background-colorau niveau des rayons de bordure .)

Le code est le suivant (et comme l'a noté theazureshadow, pour la prise en charge antérieure du navigateur, les différents préfixes de fournisseur border-radiusont été ajoutés au besoin).

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; 
}

Info bonus: border-radiusn'a aucun effet sur les tables avec border-collapse: collapse;et bordure définie sur td's. Et peu importe si border-radiusest activé table, trou td- il est ignoré.

http://jsfiddle.net/Exe3g/

L'élément tr respecte le rayon de la frontière. Peut utiliser du HTML pur et du CSS, pas de javascript.

Lien JSFiddle: http://jsfiddle.net/pflies/zL08hqp1/10/

tr {
    border: 0;
    display: block;
    margin: 5px;
}
.solid {
    border: 2px red solid;
    border-radius: 10px;
}
.dotted {
    border: 2px green dotted;
    border-radius: 10px;
}
.dashed {
    border: 2px blue dashed;
    border-radius: 10px;
}

td {
    padding: 5px;
}

<table>
    <tr>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
    </tr>
    <tr class='dotted'>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr class='solid'>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
    </tr>
    <tr class='dotted'>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
    </tr>
    <tr class='dashed'>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
    </tr>
</table>

Je pense que l'effondrement de vos frontières n'est pas la bonne chose à faire dans ce cas. Les réduire signifie essentiellement que la frontière entre deux cellules voisines devient partagée. Cela signifie qu'il n'est pas clair dans quelle direction il doit se courber en fonction d'un rayon.

Au lieu de cela, vous pouvez donner un rayon de bordure aux deux coins à gauche du premier TD et aux deux coins à droite du dernier. Vous pouvez utiliser les sélecteurs first-childet last-childcomme suggéré par theazureshadow, mais ceux-ci peuvent être mal pris en charge par les anciennes versions d'IE. Il peut être plus facile de définir simplement des classes, telles que .first-columnet .last-columnde servir cet objectif.

Selon Opera, la norme CSS3 ne définit pas l'utilisation de border-radiussur les TD. Mon expérience est que Firefox et Chrome le prennent en charge, mais Opera ne le fait pas (je ne sais pas pour IE). La solution de contournement consiste à envelopper le contenu td dans un div, puis à appliquer le border-radiusau div.

N'essayant pas de prendre des crédits ici, tout le mérite revient à @theazureshadow pour sa réponse, mais j'ai personnellement dû l'adapter pour une table qui en a <th>au lieu de<td> cellules de la première ligne.

Je publie juste la version modifiée ici au cas où certains d'entre vous voudraient utiliser la solution de @ theazureshadow, mais comme moi, en avoir <th>dans le premier <tr>. La classe "reportTable" ne doit être appliquée qu'à la table elle-même:

table.reportTable {
    border-collapse: separate;
    border-spacing: 0;
}

table.reportTable td {
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable td:last-child {
    border-right: solid gray 1px;
}

table.reportTable tr:last-child td{
    border-bottom: solid gray 1px;
}

table.reportTable th{
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable th:last-child{
    border-right: solid gray 1px;
    border-top-right-radius: 10px;
}

table.reportTable th:first-child{
    border-top-left-radius: 10px;
}

table.reportTable tr:last-child td:first-child{
    border-bottom-left-radius: 10px;
}   

table.reportTable tr:last-child td:last-child{
    border-bottom-right-radius: 10px;
}

N'hésitez pas à ajuster les rembourrages, les rayons, etc. selon vos besoins. J'espère que cela aide les gens!

J'ai trouvé que l'ajout de border-radius aux tables, très et tds ne semble pas fonctionner à 100% dans les dernières versions de Chrome, FF et IE. Ce que je fais à la place, c'est envelopper la table avec un div et y mettre le rayon de la bordure.

<div class="tableWrapper">
  <table>
    <tr><td>Content</td></tr>
  <table>
</div>

.tableWrapper {
  border-radius: 4px;
  overflow: hidden;
}

Si votre table ne l'est pas width: 100%, vous pouvez faire votre emballage float: left, n'oubliez pas de le vider.

Utilisez border-collapse: seperate; et espacement des bordures: 0; mais n'utilisez que border-right et border-bottom pour le tds, avec border-top appliqué à th et border-left appliqué uniquement à tr td: nth-child (1).

Vous pouvez ensuite appliquer un rayon de bordure au coin tds (en utilisant nth-child pour les trouver)

https://jsfiddle.net/j4wm1f29/

<table>
  <tr>
    <th>title 1</th>
    <th>title 2</th>
    <th>title 3</th>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
</table>

table {
  border-collapse: seperate;
  border-spacing: 0;
}

tr th,
tr td {
  padding: 20px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

tr th {
  border-top: 1px solid #000;
}

tr td:nth-child(1),
tr th:nth-child(1) {
  border-left: 1px solid #000;
}

/* border radius */
tr th:nth-child(1) {
  border-radius: 10px 0 0 0;
}

tr th:nth-last-child(1) {
  border-radius: 0 10px 0 0;
}

tr:nth-last-child(1) td:nth-child(1) {
  border-radius: 0 0 0 10px;
}

tr:nth-last-child(1) td:nth-last-child(1) {
  border-radius: 0 0 10px 0;
}

Ou utilisez box-shadow si la table est réduite

Toutes les réponses sont bien trop longues. Le moyen le plus simple d'ajouter un rayon de bordure à un élément de table qui accepte la bordure comme propriété consiste à faire un rayon de bordure avec débordement: masqué.

border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;