Hvordan fjerne avstand mellom bordgrenser med CSS

Når tabellen er opprettet i HTML, er CSS "hovedsakelig"grense”Eiendom brukes på den. Det vil resultere i et bord med grenser som har plass mellom seg. I tidligere versjoner av HTML ble cellesport -attributtet brukt for å fjerne det rommet. Imidlertid, i disse dager, CSS "grensekollaps”Eiendom kan brukes til samme formål.

Denne håndboken vil guide relatert til:

- Hva er "grensekollaps”CSS -eiendom?
- Hva er "grensekollaps”CSS -eiendomsverdier?
- Hvordan kollapse avstand mellom bordgrenser med CSS?

Hva er "grensekollaps" CSS-eiendommen?

CSS “grensekollaps”Eiendom brukes til å justere bordgrensene som kollapset eller separert. Når vi bruker grenseeiendommen på

, og

elementer, det resulterer i et bord med grenser med mellomrom mellom seg. For å fjerne det rommet bruker vi CSS “Border-Collapse” -egenskaper med verdien ”kollapse”.

Hva er "grensekollaps" CSS-egenskapsverdier?

Verdiene knyttet til den nevnte egenskapen er listet opp nedenfor:

- “skille”: Denne verdien legger til mellomrom mellom tabellgrenser.
- “kollapse”: Denne verdien fjerner mellomrom mellom bordgrenser.
- “arve”: Denne verdien angir standardverdien.
- “første”: Denne verdien arver fra foreldrene.

Analyser eksemplet nedenfor!

Eksempel: Hvordan lage en tabell i HTML?

I HTML, først, legg til en "

”Element for å lage en tabell. Legg deretter til et bildetekstelement. Etter det opprettes antall rader ved å bruke "" stikkord. Den første Tag har "

”Tagger for overskrifter. Andre TR -tagger holder

Tagger for dataene:

Studenters informasjon
Student navn Farsnavn Kurs Poengsum
John Tre Java -utvikling 90
Tusenfryd William Introduksjon til c++ 89
Bina Jack Introduksjon til c 79

Resultatet av ovennevnte HTML -kode er som følger:

Nå vil vi legge til en grenseegenskap og andre egenskaper for å gjøre bordet på bordet bedre.

Stil “tabell”, “th”, “td” elementer

Tabell, TH, TD
Border: 2px Solid #432c7a;
Margin: Auto;
polstring: 4px;
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;

Følgende CSS -egenskaper brukes på tabell-, TH- og TD -elementer:

- “grense”Eiendom tildeles verdien”2px solid #432c7a”Som definerer 2px grensebredde, solid grensestil og #432c7a grensefarge.
- “margin”Eiendom med verdien”bil”Indikerer lik plass rundt elementet.
- “polstring”Eiendom med verdien”4px”Setter plassen til 4px rundt elementets innhold eller inne i grensen.
- “Font-familie”Eiendom er satt som Verdana, Genève, Tahoma og Sans-serif. Den uttalte listen over stiler sikrer at hvis nettleseren ikke støtter den første verdien, så vil andre bli brukt.

Stiltabell "Bildetekst" Element

Tabellbilde
Font-størrelse: 20px;

Bildetekstelementet brukes med "skriftstørrelse”Eiendom med verdien 20px.

Det kan observeres at CSS -stylingegenskapene blir lagt til tabellen:

Hvordan kollapse avstand mellom bordgrenser med CSS?

CSS “grensekollaps”Eiendom brukes med verdien”kollapse”Til bordet, TH og TD -elementer som følger:

Border-Collapse: kollaps;

Denne egenskapen vil fjerne avstand mellom bordgrensene som følger:

Det handlet om å fjerne avstand mellom bordgrenser med CSS.

Konklusjon

I CSS, “grensekollaps”Eiendom brukes til å kollapse eller skille grenseavstand mellom bordgrensene. Denne egenskapen brukes med verdier som kollaps, separat, initial eller arver. Hver verdi utfører en annen funksjon. Imidlertid "kollapse”Verdien fjerner avstanden mellom bordgrensene. Dette innlegget beskrev hvordan du sletter avstanden mellom tabellens grenser.