Come aggiungere il raggio del bordo sulla riga della tabella

Qualcuno sa come modellare tr come ci piace?

Ho usato il border-collapse sul tavolo, dopo che i tr possono visualizzare il bordo solido di 1px che ho dato loro.

Tuttavia, quando ho provato -moz-border-radius, non funziona. Anche il semplice margine non funziona.

Puoi applicare border-radius solo a td, non tr o table. Ho aggirato questo problema per i tavoli con angoli arrotondati usando questi stili:

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

Assicurati di fornire tutti i prefissi del fornitore. Eccone un esempio in azione .

Spaziatura effettiva tra le righe

Questo è un vecchio thread, ma ho notato di aver letto i commenti dell'OP su altre risposte che apparentemente l'obiettivo originale era quello di avere border-radiussulle righe e gli spazi tra le righe. Non sembra che le soluzioni attuali lo facciano esattamente. La risposta di theazureshadow va nella giusta direzione, ma sembra aver bisogno di un po 'di più.

Per chi è interessato a questo, ecco un violino che separa le righe e applica il raggio a ciascuna riga. (NOTA: Firefox attualmente ha un bug nella visualizzazione / ritaglio background-colorai raggi del bordo .)

Il codice è il seguente (e come notato da theazureshadow, per il supporto dei browser precedenti, sono stati border-radiusaggiunti i vari prefissi del fornitore per necessità).

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

Informazioni bonus: border-radiusnon ha effetto sulle tabelle con border-collapse: collapse;e bordo impostato su td. E non importa se border-radiusè impostato su ON table, tro td-E 'ignorato.

http://jsfiddle.net/Exe3g/

L'elemento tr onora il raggio del bordo. Può usare html e css puri, non javascript.

Collegamento 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>

Penso che far crollare i tuoi confini sia la cosa sbagliata da fare in questo caso. Comprimerli significa fondamentalmente che il confine tra due celle vicine diventa condiviso. Ciò significa che non è chiaro in quale direzione dovrebbe curvare dato un raggio.

Invece, puoi dare un raggio di confine ai due angoli a sinistra del primo TD e ai due angoli a destra dell'ultimo. Puoi usare i selettori first-childe last-childcome suggerito da theazureshadow, ma questi potrebbero essere scarsamente supportati dalle versioni precedenti di IE. Potrebbe essere più semplice definire classi, come .first-columne .last-columnper servire a questo scopo.

Secondo Opera lo standard CSS3 non definisce l'uso di border-radiussu TD. La mia esperienza è che Firefox e Chrome lo supportano ma Opera no (non so di IE). La soluzione è racchiudere il contenuto td in un div e quindi applicare border-radiusil tag al div.

Non provando a prendere alcun credito qui, tutto il merito va a @theazureshadow per la sua risposta, ma personalmente ho dovuto adattarlo per una tabella che ne ha alcuni <th>invece di<td> per le celle della prima riga.

Sto solo postando la versione modificata qui nel caso in cui alcuni di voi vogliano usare la soluzione di @ theazureshadow, ma come me, ne ho alcuni <th>nella prima <tr>. La classe "reportTable" deve essere applicata solo alla tabella stessa:

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

Sentiti libero di regolare le imbottiture, i raggi, ecc. In base alle tue esigenze. Spero che questo aiuti le persone!

Ho scoperto che l'aggiunta di border-radius a tabelle, trs e tds non sembra funzionare al 100% nelle ultime versioni di Chrome, FF e IE. Quello che faccio invece è avvolgere il tavolo con un div e mettere il border-radius su di esso.

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

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

Se il tuo tavolo non lo è width: 100%, puoi creare il tuo involucro float: left, ricordati solo di cancellarlo.

Usa border-collapse: separato; e spaziatura bordo: 0; ma usa solo border-right e border-bottom per tds, con border-top applicato a th e border-left applicato solo a tr td: nth-child (1).

Puoi quindi applicare il raggio del bordo all'angolo tds (usando nth-child per trovarli)

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

Oppure usa box-shadow se la tabella è compressa

Tutte le risposte sono troppo lunghe. Il modo più semplice per aggiungere il raggio del bordo a un elemento della tabella che accetta il bordo come proprietà, è eseguire il raggio del bordo con overflow: nascosto.

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