Angi tabellkolonnebredden konstant uavhengig av mengden tekst i cellene?

Når du arbeider med tabeller, er det en utfordrende oppgave å sette bredden på tabellcellen som ikke er avhengig av innholdet eller tekststørrelsen. Når teksten til tabellcellene har blitt for langvarig/lang, vil kolonnens bredde endres automatisk. For å fikse tabellkolonnebredden, bruk egenskapen "Table-Layout" og angi verdien som "Fast".

Dette innlegget vil demonstrere:

• Hvordan lage et bord i HTML?
• Hvordan du angir tabellkolonnebredde konstant uavhengig av tekstlengde?

Hvordan lage et bord i HTML?

For å lage et bord i HTML, prøv ut den nedenfor-nevnte prosedyren.

Trinn 1: Lag en tabell

Først må du lage et bord ved hjelp av "

”Tag og sett inn“grense”Attributt til å sette grensen rundt bordet.

Trinn 2: Legg til rader og headingcelle

Deretter legger du til bordrappene med "

”Merk og legg til overskrifter celler ved å bruke“”Tagger:

”. Overskriftsteksten er definert mellom "	”Tagger: Trinn 3: Legg til dataceller For å legge til datacellene, “	”Tag brukes mellom“

Fornavn	Etternavn	Adresse
Hafsi	Rana	Hus nr. 3 Storbritannia
Jenny	Mughal	Hus nr. 219 Tyrkia
Mari	Awan	Hus nr. 487 Canada

Bordet er opprettet med suksess:

Hvordan du angir tabellkolonnebredde konstant uavhengig av tekstlengde?

Følg bredden på kolonnen som er konstant uansett.

Trinn 1: Angi tabelloppsett

Først får du tilgang til tabellen i CSS ved hjelp av tagnavnet. Deretter bruker du “Bordlayout”Eiendom og angi verdien”fikset”For å gjøre bredden på tabellceller konstant.

Trinn 2: Bruk andre CSS -egenskaper

For styling av bordet, bruk de nedenfor kodede egenskapene:

Tabell
Tabell-layout: Fast;
grense: 2px fast RGB (240, 113, 10);
Bredde: 200px;
Margin: Auto;
bakgrunnsfarge: RGB (245, 210, 210);

Her:

• “grense”Er en shorthand -eiendom som brukes til å definere grense, grensestil, bredde og farge.
• Neste, “bredde”Brukes til å stille inn elementets bredde.
• “margin”Bestemmer rommets ytre side den definerte grensen.
• Og så "bakgrunnsfarge”Eiendom som brukes til å sette bakgrunnsfargen på elementets bakside.

Produksjon

Trinn 3: Sett bredde på tabellcellen

Få tilgang til tabellcellene som overskrift og dataceller ved å bruke “th”Og“td”:

th, td
grense: 2px fast RGB (14, 156, 250);
overløp: skjult;
Bredde: 150px;

Her, "flyte”Eiendommen er satt som skjult. Denne egenskapen spesifiserer hva som skal skje hvis innholdet strømmer over i tabellceller.

Produksjon

Vi har demonstrert metoden for å sette tabellkolonnebredde konstant.

Konklusjon

For å stille inn tabellkolonnebredden konstant, lag først en tabell ved å bruke "

" stikkord. Bruk deretter “Bordlayout”CSS -egenskap og setter verdien som“fikset”For å fikse tabelloppsettstørrelsen. Etter det, bruk andre CSS -egenskaper, for eksempel “Bredde ”,“ Border ”,“ Overflow ”og“ Margin”Egenskaper, for å style bordet. Dette innlegget har vist metoden for å sette tabellkolonnen konstant uavhengig av teksten i cellene sine.

• « Mer enn 1 rad i <Input type=”textarea” />
• Hvorfor fungerer ikke høyden 100% for å utvide divene til skjermhøyden? »