Proprietà CSS3 border-radius e border-collapse: il collasso non si mescola. Come posso usare il raggio del bordo per creare una tabella compressa con gli angoli arrotondati?

Edit - Titolo originale: Esiste un modo alternativo per raggiungere border-collapse:collapsein CSS(in modo da avere un tavolo d'angolo arrotondato crollato)?

Dal momento che si scopre che semplicemente far collassare i bordi del tavolo non risolve il problema di root, ho aggiornato il titolo per riflettere meglio la discussione.

Sto cercando di creare un tavolo con angoli arrotondati usando la CSS3 border-radiusproprietà. Gli stili di tabella che sto usando sono simili a questi:

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

Ecco il problema Voglio anche impostare la border-collapse:collapseproprietà e quando impostato border-radiusnon funziona più. Esiste un modo basato su CSS per ottenere lo stesso effetto border-collapse:collapsesenza utilizzarlo effettivamente?

modifiche:

Ho creato una semplice pagina per dimostrare il problema qui (solo Firefox / Safari).

Sembra che gran parte del problema risieda nel fatto che l'impostazione della tabella in modo che abbia angoli arrotondati non influisce sugli angoli degli tdelementi angolari . Se il tavolo fosse tutto di un colore, questo non sarebbe un problema poiché potrei solo tdarrotondare gli angoli superiore e inferiore rispettivamente per la prima e l'ultima riga. Tuttavia, sto usando diversi colori di sfondo per la tabella per differenziare le intestazioni e per le strisce, così anche gli tdelementi interni mostrerebbero i loro angoli arrotondati.

Riepilogo delle soluzioni proposte:

Circondare il tavolo con un altro elemento con angoli arrotondati non funziona perché gli angoli quadrati del tavolo "sanguinano".

Se si specifica la larghezza del bordo su 0, la tabella non viene compressa.

Gli tdangoli inferiori continuano a quadrare dopo aver impostato la spaziatura cellulare su zero.

L'uso di JavaScript invece funziona evitando il problema.

Possibili soluzioni:

Le tabelle sono generate in PHP, quindi potrei semplicemente applicare una classe diversa a ciascuno dei th / td esterni e modellare ogni angolo separatamente. Preferirei non farlo, dal momento che non è molto elegante e un po 'una seccatura da applicare a più tavoli, quindi per favore continuate a ricevere suggerimenti.

La possibile soluzione 2 è utilizzare JavaScript (jQuery, in particolare) per dare uno stile agli angoli. Anche questa soluzione funziona, ma non è proprio quello che sto cercando (so di essere esigente). Ho due riserve:

1. questo è un sito molto leggero e mi piacerebbe mantenere JavaScript al minimo
2. parte del fascino che l'uso del confine-raggio ha per me è il grazioso degrado e il miglioramento progressivo. Utilizzando il raggio del bordo per tutti gli angoli arrotondati, spero di avere un sito costantemente arrotondato nei browser compatibili con CSS3 e un sito costantemente quadrato in altri (ti sto guardando, IE).

So che provare a farlo con CSS3 oggi può sembrare inutile, ma ho le mie ragioni. Vorrei anche sottolineare che questo problema è il risultato della specifica w3c, non di un supporto CSS3 scarso, quindi qualsiasi soluzione sarà comunque pertinente e utile quando CSS3 avrà un supporto più diffuso.

L'avevo capito. Devi solo usare alcuni selettori speciali.

Il problema con l'arrotondamento degli angoli del tavolo era che anche gli elementi td non si arrotondavano. Puoi risolverlo facendo qualcosa del genere:

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

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

Ora tutto gira correttamente, tranne che c'è ancora il problema di border-collapse: collapserompere tutto.

Una soluzione alternativa consiste nell'aggiungereborder-spacing: 0 e lasciare l'impostazione predefinita border-collapse: separatenella tabella.

Il seguente metodo funziona (testato in Chrome) utilizzando un box-shadowcon uno spread 1pxanziché un bordo "reale".

table {
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
}

td {
    border: 1px solid #ccc;
}

Se desideri una soluzione solo CSS (non è necessario impostare cellspacing=0l'HTML) che consenta bordi 1px (cosa che non puoi fare con la border-spacing: 0soluzione), preferisco fare quanto segue:

• Impostare a border-righte border-bottomper le celle della tabella ( tde th)
• Dare le celle nella prima riga aborder-top
• Dare le celle nella prima colonna aborder-left
• Utilizzando i selettori first-childe last-child, arrotondare gli angoli appropriati per le celle della tabella nei quattro angoli.

Guarda una demo qui.

Dato il seguente HTML:

VEDI l'esempio seguente:

   

 .custom-table{margin:30px;}
    table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 350px;
        
    }
    table tr th,
    table tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 5px;
    }
    table tr th:first-child, table tr th:last-child{
    border-top:solid 1px      #bbb;}
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
        
    }
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
    }
    table tr th {
        background: #eee;
        text-align: left;
    }
    
    table.Info tr th,
    table.Info tr:first-child td
    {
        border-top: 1px solid #bbb;
    }
    
    /* top-left border-radius */
    table tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
    /* top-right border-radius */
    table tr:first-child th:last-child,
    table.Info tr:first-child td:last-child {
        border-top-right-radius: 6px;
    }
    
    /* bottom-left border-radius */
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }
    
    /* bottom-right border-radius */
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }
         

<div class="custom-table">
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>

Hai provato a utilizzare table{border-spacing: 0}invece di table{border-collapse: collapse}???

Probabilmente dovrai mettere un altro elemento attorno al tavolo e disegnarlo con un bordo arrotondato.

La bozza di lavoro specifica che border-radiusnon si applica agli elementi della tabella quando il valore di border-collapseè collapse.

Come ha detto Ian, la soluzione è annidare il tavolo all'interno di un div e impostarlo in questo modo:

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

Con overflow:hidden, gli angoli quadrati non sanguineranno attraverso il div.

Per quanto ne so, l'unico modo in cui potresti farlo sarebbe modificare tutte le celle in questo modo:

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

E poi per ottenere il bordo sul fondo e sul retro

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-childnon è valido in ie6, ma se stai usando border-radiussuppongo che non ti interessa.

MODIFICARE:

Dopo aver visto la tua pagina di esempio, sembra che potresti essere in grado di aggirare questo problema con spaziatura e riempimento delle celle.

I grossi bordi grigi che vedi sono in realtà lo sfondo del tavolo (puoi vederlo chiaramente se cambi il colore del bordo in rosso). Se imposti la spaziatura cellulare su zero (o equivalentemente:) td, th { margin:0; }i "bordi" grigi scompaiono.

MODIFICA 2:

Non riesco a trovare un modo per farlo con una sola tabella. Se cambi la riga di intestazione in una tabella nidificata, potresti essere in grado di ottenere l'effetto desiderato, ma sarà più lavoro e non dinamico.

Ho provato una soluzione alternativa usando gli pseudo elementi :beforee :aftersu thead th:first-childethead th:last-child

In combinazione con l'avvolgimento del tavolo con a <div class="radius borderCCC">

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

vedi jsFiddle

Funziona per me in Chrome (13.0.782.215) Fammi sapere se questo funziona per te in altri browser.

In realtà puoi aggiungere il tuo table interno a divcome suo involucro. e quindi assegnare questi CSScodici a wrapper:

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

Le risposte fornite funzionano solo quando non ci sono bordi attorno al tavolo, il che è molto limitante!

Ho una macro in SASS per fare questo, che supporta pienamente e esterno i confini interni, ottenendo lo stesso stile del collasso dei bordi: collassare senza specificarlo.

Testato in FF / IE8 / Safari / Chrome.

Fornisce bei bordi arrotondati in puro CSS in tutti i browser ma IE8 (si degrada con grazia) poiché IE8 non supporta border-radius :(

Alcuni browser meno recenti potrebbero richiedere prefissi del fornitore con cui lavorareborder-radius , quindi sentiti libero di aggiungere tali prefissi al tuo codice, se necessario.

Questa risposta non è la più breve, ma funziona.

.roundedTable {
  border-radius: 20px / 20px;
  border: 1px solid #333333;
  border-spacing: 0px;
}
.roundedTable th {
  padding: 4px;
  background: #ffcc11;
  border-left: 1px solid #333333;
}
.roundedTable th:first-child {
  border-left: none;
  border-top-left-radius: 20px;
}
.roundedTable th:last-child {
  border-top-right-radius: 20px;
}
.roundedTable tr td {
  border: 1px solid #333333;
  border-right: none;
  border-bottom: none;
  padding: 4px;
}
.roundedTable tr td:first-child {
  border-left: none;
}

Per applicare questo stile è sufficiente cambiare il tuo

<table>

tag al seguente:

<table class="roundedTable">

e assicurati di includere i suddetti stili CSS nel tuo HTML.

Spero che questo ti aiuti.

Per una tabella con bordi e scorrevole, utilizzare questa opzione (sostituire variabili, $testo iniziale)

Se usi thead, tfooto th, basta sostituire tr:first-childe tr-last-childe tdcon loro.

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

Ho avuto lo stesso problema. rimuovere border-collapseinteramente e utilizzare: cellspacing="0" cellpadding="0" nel documento HTML. esempio:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

Ho appena scritto un pazzo set di CSS per questo che sembra funzionare perfettamente:

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table td,
table th {
  border-right: 1px solid #CCC;
  border-top: 1px solid #CCC;
  padding: 3px 5px;
  vertical-align: top;
}
table td:first-child,
table th:first-child {
  border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
  border-top: 0;
}
table thead td,
table th {
  background: #EDEDED;
}

/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
  border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
  border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
  border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
  border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

/* end complicated rounded table corners !*/

Soluzione con collasso del bordo: separato per tabella e display: tabella in linea per corpo e testa.

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  background: transparent;   
}
table thead {
  display: inline-table;
  width: 100%;
  background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
  -webkit-border-top-left-radius: 7px;
  -moz-border-radius-topleft: 7px;
  -webkit-border-top-right-radius: 7px;
  -moz-border-radius-topright: 7px;
    border-radius: 7px 7px 0px 0px;
  padding: 1px;
  padding-bottom: 0;
}

table tbody {
  border: 1px solid #ddd;
  display: inline-table;
  width: 100%;
  border-top: none;        
}

Sono nuovo con HTML e CSS e stavo anche cercando una soluzione per questo, ecco cosa trovo.

table,th,td {
   border: 1px solid black;
   border-spacing: 0
}
/* add border-radius to table only*/
table {
   border-radius: 25px    
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
   border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
   border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
   border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
   border-radius: 0 0 25px 0
}

Lo provo, indovina cosa funziona :)

Ho trovato questa risposta dopo aver riscontrato lo stesso problema, ma ho scoperto che è piuttosto semplice: basta dare l'overflow della tabella: nascosto

Non è necessario un elemento di avvolgimento. Certo, non so se questo avrebbe funzionato 7 anni fa quando la domanda era stata inizialmente posta, ma ora funziona.

Tavolo con angoli arrotondati e con celle bordate. Utilizzando la soluzione @Ramon Tayag .

La chiave è usare border-spacing: 0come sottolinea.

Soluzione che utilizza SCSS .

$line: 1px solid #979797;
$radius: 5px;

table {
  border: $line;
  border-radius: $radius;
  border-spacing: 0;
  th,
  tr:not(:last-child) td {
    border-bottom: $line;
  }
  th:not(:last-child),
  td:not(:last-child) {
    border-right: $line;
  }
}

Ho iniziato a sperimentare "display" e ho scoperto che: border-radius, border, margin, padding, in untable vengono visualizzati con:

display: inline-table;

Per esempio

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Ma abbiamo bisogno di impostare una widthper ogni colonna

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}

Ecco un esempio recente di come implementare una tabella con angoli arrotondati da http://medialoot.com/preview/css-ui-kit/demo.html . Si basa sugli speciali selettori suggeriti da Joel Potter sopra. Come puoi vedere, include anche un po 'di magia per rendere IE un po' felice. Include alcuni stili extra per alternare il colore delle righe:

table-wrapper {
  width: 460px;
  background: #E0E0E0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
  background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
  padding: 8px;
  -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -webkit-border-radius: 10px;
  /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-wrapper table {
  width: 460px;
}
.table-header {
  height: 35px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
  font-weight: bold;
}
.table-row td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #858585;
  padding: 10px;
  border-left: 1px solid #ccc;
  -khtml-box-shadow: 0px 1px 0px #B2B3B5;
  -webkit-box-shadow: 0px 1px 0px #B2B3B5;
  -moz-box-shadow: 0px 1px 0px #ddd;
  -o-box-shadow: 0px 1px 0px #B2B3B5;
  box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
  border-left: 1px solid #ccc;
}
tr th:first-child {
 -khtml-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -o-border-top-left-radius: 8px;
  /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-left-radius: 8px;
  border: none;
}
tr td:first-child {
  border: none;
}
tr th:last-child {
  -khtml-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -o-border-top-right-radius: 8px;
  /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-right-radius: 8px;
}
tr {
  background: #fff;
}
tr:nth-child(odd) {
  background: #F3F3F3;
}
tr:nth-child(even) {
  background: #fff;
}
tr:last-child td:first-child {
  -khtml-border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;
  /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  -khtml-border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-right-radius: 8px;
}

Ecco un modo:

div {
  ...
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
}

<div>
  <table></table>
</div>

O

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }

Faccio sempre così usando Sass

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

La migliore soluzione finora proviene dalla tua soluzione e va così:

table, tr, td, th{
  border: 1px solid; 
  text-align: center;
}

table{
	border-spacing: 0;
  width: 100%;
  display: table;
}

table tr:last-child td:first-child, tr:last-child, table {
    border-bottom-left-radius: 25px;
}

table tr:last-child td:last-child, tr:last-child, table {
    border-bottom-right-radius: 25px;
}


table tr:first-child th:first-child, tr:first-child, table {
    border-top-left-radius: 25px;
}

table tr:first-child th:last-child, tr:first-child, table {
    border-top-right-radius: 25px;
}

<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>

Border-radius è ora ufficialmente supportato. Quindi, in tutti gli esempi precedenti, puoi rilasciare il prefisso "-moz-".

Un altro trucco è utilizzare lo stesso colore per le righe superiore e inferiore del bordo. Con tutti e 3 i colori uguali, si fonde e sembra un tavolo perfettamente arrotondato anche se non è fisicamente.