Come rimuovere la spaziatura tra i bordi della tabella con CSS

Quando la tabella viene creata in HTML, principalmente il CSS "confine"La proprietà è applicata ad essa. Si tradurrà in un tavolo con bordi che hanno spazio tra di loro. Nelle versioni precedenti di HTML, l'attributo cellulare è stato utilizzato per rimuovere quello spazio. Tuttavia, in questi giorni, il CSS "Collapse al confine"La proprietà può essere utilizzata per lo stesso scopo.

Questo manuale guiderà relativo a:

- Quale è "Collapse al confine"Proprietà CSS?
- Quali sono le "Collapse al confine"Valori della proprietà CSS?
- Come crollare la spaziatura tra i bordi della tabella con CSS?

Qual è la proprietà CSS "colletti di confine"?

Il CSS "Collapse al confine"La proprietà viene utilizzata per regolare i bordi della tabella come collassato o separato. Quando applichiamo la proprietà di confine al file

, E

elementi, si traduce in una tabella con bordi con spazi tra loro. Per rimuovere quello spazio, utilizziamo la proprietà CSS "Collapse a confine" con il valore "crollo".

Quali sono i valori delle proprietà CSS "colletti di confine"?

I valori associati alla proprietà menzionati sono elencati di seguito:

- "separato": Questo valore aggiunge spazi tra i bordi della tabella.
- "crollo": Questo valore rimuove gli spazi tra i bordi della tabella.
- "ereditare": Questo valore imposta il valore predefinito.
- "iniziale": Questo valore eredita dal suo genitore.

Analizzare l'esempio di seguito!

Esempio: come creare una tabella in HTML?

In HTML, prima, aggiungi un “

"Elemento per creare una tabella. Quindi, aggiungi un elemento di didascalia. Successivamente, il numero di righe viene creato utilizzando il ""Tag. Il primo Tag tiene il "

"Tag per le intestazioni. Altri tag TR contengono il

Tag per i dati:

Informazioni sugli studenti
Nome dello studente Nome del padre Corso Punto
John Legna Sviluppo di Java 90
Margherita William Introduzione a c++ 89
Bina Jack Introduzione a c 79

Il risultato del codice HTML sopra è il seguente:

Ora aggiungeremo una proprietà di confine e altre proprietà per migliorare l'aspetto del tavolo.

Stile "tavolo", "th", "td" elementi

Table, th, td
Bordo: 2px Solid #432C7A;
Margine: auto;
imbottitura: 4px;
Font-Family: Verdana, Ginevra, Tahoma, Sans-Serif;

Le seguenti proprietà CSS sono applicate agli elementi della tabella, TH e TD:

- "confine"Alla proprietà è assegnato il valore"2px Solid #432C7A"Che definisce la larghezza del bordo 2px, lo stile del bordo solido e il colore del bordo #432C7A.
- "margine"Proprietà con il valore"auto"Indica uguale spazio attorno all'elemento.
- "imbottitura"Proprietà con il valore"4px"Imposta lo spazio di 4px attorno al contenuto dell'elemento o all'interno del bordo.
- "famiglia di font"La proprietà è ambientata come Verdana, Ginevra, Tahoma e Sans-Serif. L'elenco degli stili dichiarato garantisce che se il browser Web non supporta il primo valore, altri verranno applicati.

Elemento "didascalia" tabella di stile

didascalia
Font-size: 20px;

L'elemento didascalia viene applicato con "dimensione del font"Proprietà con il valore 20px.

Si può osservare che le proprietà di stile CSS vengono aggiunte correttamente alla tabella:

Come crollare la spaziatura tra i bordi della tabella con CSS?

Il CSS "Collapse al confineLa proprietà "viene applicata con il valore"crollo"Al tavolo, TH e TD Elements come segue:

Collapse di confine: collasso;

Questa proprietà rimuoverà la spaziatura tra i bordi della tabella come segue:

Si trattava di rimuovere la spaziatura tra i bordi del tavolo con CSS.

Conclusione

In CSS, il “Collapse al confine"La proprietà viene utilizzata per crollare o separare la spaziatura del bordo tra i bordi del tavolo. Questa proprietà viene applicata con valori come crollo, separato, iniziale o ereditario. Ogni valore svolge una funzione diversa. Comunque, il "crollo"Il valore rimuove la spaziatura tra i bordi della tabella. Questo post ha descritto come eliminare la spaziatura tra i bordi della tabella.