Solo angoli arrotondati dei tavoli CSS

Ho cercato e cercato, ma non sono riuscito a trovare una soluzione per la mia esigenza.

Ho una semplice tabella HTML. Voglio arrotondare gli angoli per questo, senza usare immagini o JS, cioè solo CSS puro . Come questo:

Angoli arrotondati per le celle d'angolo e 1pxbordo spesso per le celle.

Finora ho questo:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

Ma questo mi lascia senza confini per le celle. Se aggiungo bordi, non sono arrotondati!

Eventuali soluzioni?

Sembra funzionare bene in FF e Chrome (non ne ho testati altri) con bordi separati: http://jsfiddle.net/7veZQ/3/

Modifica: ecco un'implementazione relativamente pulita del tuo schizzo:

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

http://jsfiddle.net/MuZzz/3577/

Per me, la soluzione Bootstrap di Twitter sembra buona. Esclude IE <9 (senza angoli arrotondati in IE 8 e inferiori), ma penso che sia OK, se sviluppi potenziali Web-App.

CSS / HTML:

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}

<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>

Puoi giocarci qui (su jsFiddle)

In primo luogo, avrai bisogno di qualcosa di più che semplicemente -moz-border-radiusse vuoi supportare tutti i browser. È necessario specificare tutte le varianti, incluso normale border-radius, come segue:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

In secondo luogo, per rispondere direttamente alla tua domanda, in border-radiusrealtà non viene visualizzato un bordo; imposta solo l'aspetto degli angoli del bordo, se ce n'è uno.

Per attivare il bordo e quindi ottenere gli angoli arrotondati, è necessario anche l' borderattributo sui propri elementi tde th.

td, th {
   border:solid black 1px;
}

Vedrai anche gli angoli arrotondati se hai un colore di sfondo (o grafico), anche se ovviamente dovrebbe essere un colore di sfondo diverso dall'elemento circostante affinché gli angoli arrotondati siano visibili senza bordo.

Vale la pena notare che alcuni browser meno recenti non amano inserire border-radiustabelle / celle di tabelle. Potrebbe valere la pena inserire un <div>all'interno di ogni cella e acconciare quello. Tuttavia questo non dovrebbe influire sulle versioni correnti di alcun browser (tranne IE, che non supporta affatto gli angoli arrotondati - vedi sotto)

Infine, non che IE non supporti border-radiusaffatto (IE9 beta lo fa, ma la maggior parte degli utenti di IE sarà su IE8 o meno). Se vuoi hackerare IE per supportare border-radius, guarda http://css3pie.com/

[MODIFICARE]

Ok, questo mi dava fastidio, quindi ho fatto alcuni test.

Ecco un esempio di JSFiddle con cui ho giocato

Sembra che la cosa fondamentale che ti mancava fosse border-collapse:separate;l'elemento table. Ciò impedisce alle celle di collegare tra loro i bordi, il che consente loro di rilevare il raggio del bordo.

Spero possa aiutare.

La risposta selezionata è terribile. Lo implementerei mirando alle celle della tabella d'angolo e applicando il raggio del bordo corrispondente.

Per ottenere gli angoli superiori, impostare il raggio del bordo sul primo e l'ultimo di tipo degli elementi esimi , quindi terminare impostando il raggio del bordo sull'ultimo e il primo di td sull'ultimo di tipo tr per ottenere gli angoli inferiori.

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

La migliore soluzione che ho trovato per gli angoli arrotondati e altri comportamenti CSS3 per IE <9 può essere trovata qui: http://css3pie.com/

Scarica il plug-in e copialo in una directory nella struttura della soluzione. Quindi nel foglio di stile assicurati di avere il tag di comportamento in modo che inserisca il plug-in.

Semplice esempio dal mio progetto che mi dà angoli arrotondati, sfumatura di colore e ombreggiatura per il mio tavolo:

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

Non preoccuparti se il tuo Visual Studio CSS intellisense ti dà la sottolineatura verde per proprietà sconosciute, funziona ancora quando lo esegui. Alcuni elementi non sono documentati molto chiaramente, ma gli esempi sono piuttosto buoni, soprattutto in prima pagina.

Per esperienza personale ho scoperto che non è possibile arrotondare gli angoli di una cella di una tabella HTML con puro CSS. È possibile arrotondare il bordo più esterno di una tabella.

Dovrai ricorrere all'uso di immagini come descritto in questo tutorial o simili :)

È un po 'approssimativo, ma ecco qualcosa che ho messo insieme che è composto interamente da CSS e HTML.

• Angoli esterni arrotondati
• Riga di intestazione
• Più righe di dati

Questo esempio utilizza anche la :hoverpseudo classe per ciascuna cella di dati <td>. Gli elementi possono essere facilmente aggiornati per soddisfare le tue esigenze e il passaggio del mouse può essere rapidamente disabilitato.

(Tuttavia, non ho ancora ottenuto il :hovercorretto funzionamento per righe complete <tr>. L'ultima riga al passaggio del mouse non viene visualizzata con gli angoli arrotondati nella parte inferiore. Sono sicuro che ci sia qualcosa di semplice che viene trascurato.)

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}

<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>

Aggiungi un <div>wrapper attorno al tavolo e applica il seguente CSS

border-radius: x px;
overflow: hidden;
display: inline-block;

a questo wrapper.

Per adattare la brillante risposta di @luke farinanoy e se non stai usando thnella tua tabella, ecco tutto il CSS di cui hai bisogno per creare una tabella arrotondata:

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

Per una tabella con bordi e scorrevole, usa questo (sostituisci variabili, $testi iniziali)

Se usi thead, tfooto th, sostituisci 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>

Puoi provare questo se vuoi gli angoli arrotondati su ciascun lato della tabella senza toccare le celle: http://jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>

HTML di esempio

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

SCSS, facilmente convertito in CSS, usa sassmeister.com

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

Quanto segue è qualcosa che ho usato e che ha funzionato per me su tutti i browser, quindi spero che aiuti qualcuno in futuro:

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

Ovviamente la #contentblockporzione può essere sostituita / modificata secondo necessità e puoi trovare il border-radius.htcfile facendo una ricerca su Google o sul tuo browser web preferito.

Questo è css3 , solo il browser recente non IE <9 lo supporterà.

Controlla qui , deriva la proprietà round per tutti i browser disponibili

Aggiungi tra <head>tag:

<style>
  td {background: #ffddaa; width: 20%;}
</style>

e nel corpo:

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

Il colore della cella, il contenuto e la formattazione sono ovviamente ad esempio;
si tratta di spaziare le celle piene di colore all'interno di un div. In questo modo, i bordi della cella / del tavolo neri sono in realtà il colore di sfondo del div.
Nota che dovrai impostare div-border-radius circa 2 valori maggiori dei raggi del bordo dell'angolo della cella separata, per ottenere un effetto di angolo arrotondato uniforme.

Lezione sui bordi delle tabelle ...

NOTA: il codice HTML / CSS riportato di seguito deve essere visualizzato solo in IE. Il codice non verrà visualizzato correttamente in Chrome!

Dobbiamo ricordare che:

1. Una tabella ha un bordo: il suo confine esterno (che può anche avere un raggio di confine).

2. Le celle stesse hanno ANCHE bordi (che possono anche avere un raggio di confine).

3. La tabella e i bordi delle celle possono interferire tra loro:

   Il bordo della cella può perforare il bordo della tabella (ad esempio: limite della tabella).

   Per vedere questo effetto, modificare le regole di stile CSS nel codice seguente come segue:
   i. tabella {border-collapse: separate;}
   ii. Elimina le regole di stile che arrotondano le celle d'angolo della tabella.
   iii. Quindi gioca con la spaziatura dei bordi in modo da poter vedere l'interferenza.

4. Tuttavia, il bordo della tabella e i bordi delle celle possono essere COLLASSATI (utilizzando: border-collapse: collapse;).

5. Quando vengono compressi, i bordi della cella e della tabella interferiscono in modo diverso:

   io. Se il bordo della tabella è arrotondato ma i bordi delle celle rimangono quadrati, la forma della cella ha la precedenza e la tabella perde i suoi angoli curvi.

   ii. Al contrario, se le celle d'angolo sono curve ma il confine della tabella è quadrato, vedrai un brutto angolo quadrato che confina con la curvatura delle celle d'angolo.

6. Dato che l'attributo della cella ha la precedenza, il modo per arrotondare i quattro angoli della tabella è quindi:

   io. Comprimere i bordi sulla tabella (usando: border-collapse: collapse;).

   ii. Impostazione della curvatura desiderata sulle celle d'angolo del tavolo.
   iii. Non importa se gli angoli della tabella sono arrotondati (es .: il raggio del bordo può essere zero).

			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}

			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>

CSS:

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}