Crollo del bordo CSS

Codice CSS:
Applichiamo alcune proprietà sull'intestazione per rendere la nostra intestazione più attraente. Cambiamo la sua "famiglia di carattere" e lo impostiamo su "Arial". Lo stile di questo testo di intestazione è "corsivo" e il colore di questa intestazione è "blu". Ora procediamo al tavolo e impostiamo il bordo della tabella come "1px" in larghezza, "solido" in tipo e "nero" di colore. Il concetto principale è usato qui che è "collasso di frontiera". Usiamo questa proprietà e impostiamo questo "collasso di confine" per "crollare".

Produzione:
Diamo un'occhiata alla seguente immagine in cui viene mostrata l'output. Puoi vedere che il bordo del tavolo è single.

Esempio n. 2
In questo caso, modifichiamo un po 'la tabella precedente. Qui, aggiungiamo altre due colonne alla tabella precedente e usiamo nuovamente la proprietà "Collapse a confine" in questa nuova tabella.

Codice CSS:
Nel codice CSS, utilizziamo un'altra proprietà che è la proprietà "spaziatura delle frontiere". Vedrai se influisce sul bordo del tavolo o meno quando usiamo la proprietà "Collapse a confine" insieme a questa proprietà.

Modifichiamo la "famiglia del carattere" dell'intestazione. Questa volta, usiamo "Calibri" come "Font-Family" dell'intestazione. Il "colore" che usiamo qui per l'intestazione è "rosso". Ora, applica di nuovo la proprietà "bordo" per la tabella, la cella e l'intestazione del tavolo. Il bordo di tutte queste proprietà è impostato su "2px", con un tipo "solido" e colore "verde". La proprietà "Collapse a confine" è impostata su "crollo". Quindi usiamo la "spaziatura del bordo" per dare spazio tra il bordo della tabella e le celle della tabella. Lo impostiamo su "20px".

Produzione:

Qui, l'output non mostra alcuna differenza nel bordo delle tabelle e delle celle. Appare lo stesso dell'illustrazione precedente. Ciò significa che la proprietà "spaziatura del confine" non cambia lo spazio del bordo del tavolo perché abbiamo usato la proprietà "Collapse a confine" in questa tabella insieme alla proprietà "spaziatura del confine".

Esempio n. 3
Qui, creiamo due tabelle diverse allo stesso modo discusso in precedenza nel nostro primo esempio. Creiamo due tabelle in modo da poter imparare come questa proprietà "colletti da bordo" funziona in modo diverso rispetto alla proprietà di frontiera "separata".

Codice CSS:
La "famiglia di font" della voce è "Times New Roman" con un colore "blu". Il "bordo" di entrambe le tabelle è impostato sul colore "arancione" e "2px" di tipo "solido". Usiamo la proprietà "Collapse a confine" nella Tabella 1. Usiamo anche l'altro "collasso di confine" nella Tabella 2, ma questa volta, impostiamo questa proprietà come "separata".

Produzione:
Qui, abbiamo due tabelle nell'output. Il primo bordo della tabella è lo stesso dei nostri esempi precedenti. Ma il secondo bordo della tabella è diverso perché abbiamo usato il "separato" con il "collasso di confine". Il bordo della tabella è separato dal bordo delle celle in una tabella.

Esempio #4
Qui, abbiamo di nuovo due tavoli che abbiamo progettato nell'esempio 3. Ora cambiamo alcuni stili di queste tabelle, utilizziamo la proprietà "spaziatura del bordo" su entrambe le tabelle e controlli la differenza in entrambe le tabelle.

Questa volta, la "famiglia del carattere" della voce è "algerina" e il colore è "marrone". Il bordo del tavolo è di colore "magenta". La tabella uno utilizza il "crollo" con il "collasso del bordo" con una "spaziatura del bordo" di "10px". Per la tabella due, utilizziamo un bordo "separato" e la "spaziatura del bordo" è anche "10px". L'output mostrerà la differenza.

Produzione:
Nell'output, puoi facilmente vedere la differenza tra la tabella uno e la tabella due. Ciò dimostra che quando usiamo il "Collapse del confine: bordo", allora il "spaziatura del bordo" non influisce sulla tabella. Ma quando usiamo il "Collapse a confine: separato", allora possiamo impostare la spaziatura del bordo tra le cellule e il bordo del tavolo secondo la nostra scelta.

Esempio #5
Qui, applichiamo le tre proprietà del bordo del tavolo. Innanzitutto, utilizziamo la proprietà "Collapse a confine" nella Tabella 1 che è impostata come "crollo". Nella seconda proprietà, cambiamo il colore del bordo a "verde marino medio". Nella terza proprietà, utilizziamo il "spaziatura del bordo: 10px". Successivamente, utilizziamo le stesse proprietà nella Tabella 2, ma utilizziamo la proprietà "separata" anziché "crollo" nella proprietà "collasso di confine". Inoltre, abbiamo impostato il colore del bordo per "viola" e usiamo lo stesso "spaziatura del bordo". Ora, guarda come funziona.

Non ci sono cambiamenti nella Tabella 1. Non c'è spaziatura tra il bordo del tavolo e le cellule. Il colore del tavolo è lo stesso. La proprietà "bordo-colore" non influisce sulla tabella in quanto utilizziamo il bordo "crollo" nella tabella 1. Ma nella Tabella 2, puoi vedere che il colore del bordo del tavolo e il bordo della cella sono diversi. Inoltre, c'è una spaziatura di "10px" tra il bordo della cella e il bordo del tavolo.

Conclusione

In questo tutorial, abbiamo usato la proprietà "Collapse a confine" e abbiamo imparato la differenza quando usiamo "separati" e "crollo" con la proprietà "colletti di confine". Ci viene anche mostrato l'output in cui sono visibili la differenza sia in "separato" che in "crollo". Puoi facilmente ottenere questo concetto su come entrambe le proprietà sono diverse l'una dall'altra. Hai imparato cosa succede quando usiamo la proprietà "separata" e "crollo" con la proprietà "Collapse a confine" in CSS.

• « CSS ATRT
• Proprietà CSS Border-Left »