CSS border-collapse
La proprietà CSS border-collapse gestisce la fusione dei bordi nelle tabelle
La proprietà border-collapse consente di determinare se i bordi delle celle di una tabella si uniscono o restano separati. Con il valore collapse, i bordi si fondono, mentre con separate, ciascuna cella mantiene il proprio bordo.
Sintassi
Significato dei valori principali:
-
collapse: i bordi delle celle della tabella si uniscono, creando un solo bordo comune tra le celle.
-
separate: i bordi delle celle sono separati, ognuna con il proprio bordo.
Esempio proprietà: border-collapse
Codice Esempio: border-collapse
.border-collapse-example {
border-collapse: collapse; /* I bordi delle celle si uniscono */
width: 100%;
border: 2px solid #50a14f;
}.border-collapse-example td {
border: 1px solid #ff6347; /* Bordo delle celle */
padding: 10px;
text-align: center;
}
Contenuto Esempio: border-collapse
Esempio di utilizzo di border-collapse
In questo esempio, la proprietà border-collapse viene utilizzata per determinare come i bordi delle celle di una tabella si comportano:
| Colonna 1 | Colonna 2 |
| Colonna 3 | Colonna 4 |
CSS e HTML per la tabella con border-collapse:
<style>
.border-collapse-example {
border-collapse: collapse; /* Unisce i bordi adiacenti delle celle */
width: 100%;
border: 5px solid #50a14f; /* Bordo verde esterno della tabella */
}
.border-collapse-example td {
border: 2px solid #ff6347; /* Bordo rosso delle singole celle */
padding: 10px;
text-align: center;
}
</style>
<table class="border-collapse-example">
<tr>
<td>Colonna 1</td>
<td>Colonna 2</td>
</tr>
<tr>
<td>Colonna 3</td>
<td>Colonna 4</td>
</tr>
</table>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
