Come arrotondare i bordi di una tabella HTML con CSS3 (CSS3 Rounded Tables Borders)

Ciao e benvenuto. Se hai bisogno di chiarimenti sul codice, lascia un commento (no WhatsApp); ricorda però che non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, quindi se la tua richiesta va oltre il semplice "aiutino", se vuoi mi chiedi una consulenza a pagamento nella pagina contatti. Grazie della comprensione. Alessio

Con il CSS3 si possono creare davvero cose molto carine e di sicuro impatto visivo, per esempio oggi vediamo come creare una tabella con i bordi arrotondati, utilizzando solo il CSS3 senza ricorrere a JQuery.

Iniziamo scrivendo L’HTML che conterrà semplicemente la nostra tabella applicando una classe che per convenzione chiameremo bordered

#	Titolo	Anno
1	Valore	1994
2	Valore	1972
3	Valore	1974

Ora prepariamo il foglio di stile CSS3

table {

*border-collapse: collapse; /* IE7 and lower */

border-spacing: 0;

width: 100%;

background:#ffffff !important; /* For IE*/

}

.bordered {

border: solid #ccc 1px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

border-radius: 6px;

behavior: url(border-radius.htc);

-webkit-box-shadow: 0 1px 1px #ccc;

-moz-box-shadow: 0 1px 1px #ccc;

box-shadow: 0 1px 1px #ccc;

}

.bordered tr:hover {

background: #fbf8e9;

-o-transition: all 0.1s ease-in-out;

-webkit-transition: all 0.1s ease-in-out;

-moz-transition: all 0.1s ease-in-out;

-ms-transition: all 0.1s ease-in-out;

transition: all 0.1s ease-in-out;

}

.bordered td, .bordered th {

border-left: 1px solid #ccc;

border-top: 1px solid #ccc;

padding: 10px;

text-align: left;

}

.bordered th {

background-color: #dce9f9;

background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));

-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;

-moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;

box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;

border-top: none;

text-shadow: 0 1px 0 rgba(255,255,255,.5);

}

.bordered td:first-child, .bordered th:first-child {

border-left: none;

}

.bordered 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(border-radius.htc);

}

.bordered 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(border-radius.htc);

}

.bordered th:only-child{

-moz-border-radius: 6px 6px 0 0;

-webkit-border-radius: 6px 6px 0 0;

border-radius: 6px 6px 0 0;

behavior: url(border-radius.htc);

}

.bordered 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;

}

.bordered tr:last-child td:last-child {

-moz-border-radius: 0 0 6px 0;

-webkit-border-radius: 0 0 6px 0;

border-radius: 0 0 6px 0;

behavior: url(border-radius.htc);

}

Compatibilità con i browsers


5.0 4.0 -webkit-	9.0	4.0 3.0 -moz-	5.0 3.1 -webkit	10.5

La proprietà border-radius è compatibile con i maggiori browser più aggiornati, per avere la compatibilità con versioni di Microsoft Internet Explorer antecedenti alla 9.0, è necessario ricorrere ad un escamotage.

Come rendere il border-radius compatibile su (Internet Explorer) IE8, IE7 e IE6

Se riguardate il CSS che ho scritto sopra, troverete in alcune righe e più precisamente ogni volta che viene richiamata la proprietà border-radius, questa sintassi behavior: url(border-radius.htc); questo è un file che contiene le istruzione per rendere compatibile i bordi arrotondati anche su queste versioni di Internet Explorer, è sufficiente mettere il file border-radius.htc nella stessa cartella in cui risiede il file CSS.