CSS Border Collapse

Daniel Johnsen
CSS Border Collapse
En grense er noe som vises rundt bordet eller cellene. Det brukes også til å skille to celler eller elementer og rundt hele bordet eller boksen. Grensekollapsen betyr at grensen til tabellen eller cellen vises som en enkelt linje. Vi bruker denne grensekollapsegenskapen i CSS når vi ønsker å vise en enkelt kant rundt bordet eller cellene i tabellen.

I denne opplæringen vil vi bruke denne grensekollapsegenskapen på bordet, slik at du lærer hvordan denne egenskapen brukes i CSS for å kollapse grensen til bordet og for å skille grensen til tabellen og cellene. La oss begynne å utforske eksemplene gitt i denne opplæringen for å lære dette grensekollaps-konseptet.

Syntaks:

  • Border-Collapse: kollaps;
  • grensekollaps: separat;

Eksempel 1
Åpne filen i Visual Studio -koden og velg språket for dette, som er HTML -språket når vi lager en tabell i HTML. Etter dette kobler vi HTML -filen til CSS -filen for ytterligere styling av tabellen. Du kan utføre disse eksemplene på den forskjellige programvaren etter ditt valg, men koden for dette er den samme. Her bruker vi Visual Studio Code. Denne HTML -filen lagres. Vi bruker “.HTML ”Fil Extension for denne filen.

Den forrige koden er HTML -koden der vi oppretter en tabell med fire rader og to kolonner. Først skriver vi en overskrift og bruker deretter "

”Tag for å lage tabellen. “”Er her for å representere“ radene ”på tabellen. Vi skriver inn dataene i cellene i tabellen ved å bruke “
”Er å definere overskriften på tabellen. “
”. “”Er å definere“ cellen ”i tabellen. Etter å ha opprettet tabellen og lagt data i denne tabellen, flytter vi til CSS -filen for å gi stil til denne tabellen. Vi bruker grensekollapsegenskapen i CSS-koden.

CSS -kode:
Vi bruker noen eiendommer på overskriften for å gjøre overskriften mer attraktiv. Vi endrer "font-familiens" og setter den til "arial". Stilen til denne overskriftsteksten er "kursiv" og fargen på denne overskriften er "blå". Nå fortsetter vi til bordet og setter grensen til bordet som "1px" i bredden, "solid" i type, og "svart" i fargen. Hovedkonseptet brukes her som er "grensekollaps". Vi bruker denne egenskapen og setter denne "grensekollaps" til "kollaps".

Produksjon:
La oss se på følgende bilde der utgangen vises. Du kan se at grensen til bordet er singel.

Eksempel nr. 2
I dette tilfellet redigerer vi forrige tabell litt. Her legger vi til to kolonner til forrige tabell og bruker egenskapen “Border-Collapse” igjen på denne nye tabellen.

CSS -kode:
I CSS-koden bruker vi en annen eiendom som er egenskapen "grenseområde". Du vil se om det påvirker grensen til bordet eller ikke når vi bruker egenskapen "Border-Collaps" sammen med denne eiendommen.

Vi redigerer "font-familiens" av overskriften. Denne gangen bruker vi "Calibri" som "Font-Family" av overskriften. "Fargen" vi bruker her for overskriften er "rød". Påfør nå "grensen" -egenskapen igjen for tabellen, cellen og overskriften på bordet. Grensen til alle disse egenskapene er satt til “2px”, med en "solid" type og "grønn" farge. Egenskapen "Border-Collapse" er satt til "kollaps". Deretter bruker vi "grensesnitt" for å gi rom mellom grensen til tabellen og cellene i tabellen. Vi setter den til “20px”.

Produksjon:

Her viser utgangen ingen forskjell i grensen til tabellene og cellene. Det ser ut til det samme som i forrige illustrasjon. Dette betyr at egenskapen "grenseområde" ikke endrer tabellens grenseplass fordi vi brukte egenskapen "grense-kollaps" i denne tabellen sammen med egenskapen "grenseområde" ".

Eksempel nr. 3
Her lager vi to forskjellige tabeller på samme måte som diskutert tidligere i vårt første eksempel. Vi lager to tabeller slik at vi kan lære hvordan denne "grensekollaps" -egenskapen fungerer annerledes enn "separate" grenseeiendommen.

CSS -kode:
Overskriften "font-family" er "Times New Roman" med en "blå" farge. "Grensen" for begge tabellene er satt til "oransje" farge og "2px" av "solid" type. Vi bruker egenskapen “Border-Collapse” i tabell 1. Vi bruker også den andre "grensekollaps" i tabell 2, men denne gangen setter vi denne egenskapen som "separat".

Produksjon:
Her har vi to tabeller i utgangen. Den første bordgrensen er den samme som i våre tidligere eksempler. Men den andre tabellgrensen er annerledes fordi vi brukte "separate" med "grensekollaps". Tabellens grense er atskilt fra grensen til cellene i en tabell.

Eksempel 4
Her har vi to bord igjen som vi designet i eksempel 3. Nå endrer vi noen stiler av disse tabellene, bruker egenskapen "grense-avstand" på begge tabellene og sjekker forskjellen i begge tabellene.

Denne gangen er overskriften "font-family" "algerisk" og fargen er "maroon". Bordgrensen er "magenta" i farger. Tabell man bruker "kollapsen" med "grensekollaps" med en "grenseområde" på "10px". For tabell to bruker vi en "separat" grense, og "grensesiden" er også "10px". Utgangen vil vise forskjellen.

Produksjon:
I utgangen kan du enkelt se forskjellen mellom tabell en og tabell to. Dette viser at når vi bruker "grensekollaps: grensen", påvirker ikke "grensesalingen" tabellen. Men når vi bruker "grensekollaps: separat", kan vi sette avstanden til grensen mellom celler og tabellgrensen i henhold til vårt valg.

Eksempel 5
Her bruker vi de tre egenskapene til bordgrensen. Først bruker vi egenskapen "Border-Collaps" i tabell 1 som er satt som "kollaps". I den andre egenskapen endrer vi fargen på grensen til “Medium Sea Green”. I den tredje eiendommen bruker vi “Border-Pacing: 10px”. Etter det bruker vi de samme egenskapene i tabell 2, men vi bruker "separat" i stedet for "kollaps" i egenskapen "grensekollaps". Vi setter også fargen på grensen til "lilla" og bruker den samme "grensesalingen". Se hvordan det fungerer.

Det er ingen endring i tabell 1. Det er ingen avstand mellom grensen til tabellen og cellene. Fargen på tabellen er den samme. Eiendommen "grensefarge" påvirker ikke bordet når vi bruker "kollaps" -grensen i tabell 1. Men i tabell 2 kan du se at fargen på tabellens grenser og cellens grense er forskjellig. Det er også en avstand på "10px" mellom cellens grense og bordets grense.

Konklusjon

I denne opplæringen brukte vi egenskapen "grense-kollaps" og lærte forskjellen når vi bruker "separat" og "kollaps" med egenskapen "grensekollaps". Vi får også vist utgangen der forskjellen i både "separat" og "kollaps" er synlige. Du kan enkelt få dette konseptet om hvordan begge egenskapene er forskjellige fra hverandre. Du lærte hva som skjer når vi bruker "separate" og "kollaps" med "grensekollaps" -egenskapen i CSS.

C ++
Hva er += i C++?
I C ++ er+= en kombinasjon av to operatører, den ene er tilleggsoperatøren og den andre er oppdragso...
Oskar Fossum
Bash -programmering
Hvordan du fikser - bash pip -kommando ikke funnet
De...
Anders Fjeld Moe
Bash -programmering
Hvordan bruke SEQ -kommandoen i bash
'SEQ' -kommandoen er et nyttig verktøy i bash for å generere sekvenser av tall. Les denne guiden for...
Lars Solberg