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?

https://stackoverflow.com/questions/628301

06-07-2019
|

Domanda

Modifica - Titolo originale: esiste un modo alternativo per ottenere border-collapse:collapse in CSS (per avere una tabella angolare compressa e arrotondata)?

Poiché 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 una tabella con angoli arrotondati utilizzando la proprietà CSS3 border-radius. Gli stili di tabella che sto usando sono simili a questo:

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

Ecco il problema. Voglio anche impostare la proprietà td e quando è impostata <=> non funziona più. Esiste un modo basato su CSS per ottenere lo stesso effetto di <=> senza effettivamente utilizzarlo?

modifiche

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

Sembra che gran parte del problema sia che l'impostazione della tabella in modo che gli angoli arrotondati non influisca sugli angoli degli angoli <=> elementi. Se la tabella fosse tutta di un colore, questo non sarebbe un problema poiché potrei solo arrotondare 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 la striping, quindi anche gli elementi <=> interni mostrerebbero i loro angoli arrotondati.

Riepilogo delle soluzioni proposte:

Circondare la tabella con un altro elemento con angoli arrotondati non funziona perché gli angoli quadrati della tabella " bleed through. "

Specificare la larghezza del bordo su 0 non comprime la tabella.

Gli angoli inferiori <=> sono ancora quadrati 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 / tds 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 è usare 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:

questo è un sito molto leggero e mi piacerebbe mantenere JavaScript al minimo
parte del fascino che l'uso del raggio-bordo ha per me è il grazioso degrado e il progressivo miglioramento. 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 oggi con CSS3 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.

Soluzione

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

Il problema con l'arrotondamento degli angoli del tavolo era che anche gli elementi td non venivano arrotondati. 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: collapse rompere tutto. Una soluzione alternativa consiste nell'impostare cellspacing="0" nell'html (grazie, Joel ).

Altri suggerimenti

Il seguente metodo funziona (testato in Chrome) usando un box-shadow con uno spread di 1px invece di un " real " confine.

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 si desidera una soluzione solo CSS (non è necessario impostare cellspacing=0 nell'HTML) che consenta bordi 1px (cosa che non si può fare con la soluzione border-spacing: 0), preferisco fare quanto segue:

Imposta un border-right e border-bottom per le celle della tua tabella (td e th)
Assegna alle celle nella prima riga un border-top
Assegna alle celle nella prima colonna un border-left
Utilizzando i selettori first-child e 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 usare 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-radius non 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 sanguinano 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 in basso e a destra indietro

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

:last-child non è valido in ie6, ma se stai usando border-radius suppongo che non ti interessi.

Modifica

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 della tabella (puoi vederlo chiaramente se cambi il colore del bordo in rosso). Se imposti la spaziatura cellulare su zero (o equivalentemente: td, th { margin:0; }) il grigio & Quot; bordi & Quot; scomparirà.

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 utilizzando gli pseudo elementi :before e :after su thead th:first-child e thead th:last-child

In combinazione con il wrapping della tabella con un <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.

Ho avuto lo stesso problema. rimuovi border-collapse completamente e usa: cellspacing="0" cellpadding="0" nel documento html. Esempio:

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

In realtà puoi aggiungere il tuo table all'interno di un div come suo wrapper. e quindi assegnare questi CSS codici al 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 farlo, che supporta pienamente i confini interni e , ottenendo lo stesso stile del confine-collasso: collasso 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 i browser più vecchi potrebbero richiedere prefissi dei fornitori per funzionare con border-radius, quindi sentiti libero per aggiungere quei prefissi al 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 basta cambiare il tuo

<table>

tag al seguente:

<table class="roundedTable">

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

Spero che questo aiuti.

Per una tabella bordata e scorrevole, usa questa opzione (sostituisci variabili, $ testi iniziali)

Se usi thead, tfoot o th, sostituisci semplicemente tr:first-child e tr-last-child e td con 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 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 border-collapse: separata per tabella e display: inline-table per tbody e thead.

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 essersi imbattuto nello 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 celle bordate. Utilizzando la soluzione @Ramon Tayag .

La chiave è usare border-spacing: 0 come 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 con " display " e ho scoperto che: border-radius, border, margin, padding, in table sono visualizzati con:

display: inline-table;

Ad esempio

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

Ma dobbiamo impostare un width di 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;
}

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

Border-radius è ora ufficialmente supportato. Quindi, in tutti gli esempi precedenti, puoi rilasciare & Quot; -moz - & Quot; prefisso.

Un altro trucco è usare 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.

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow