Impostare costante la larghezza della colonna della tabella indipendentemente dalla quantità di testo nelle sue celle?

Quando si tratta di tabelle, l'impostazione della larghezza della cella della tabella che non dipende dal contenuto o dalla dimensione del testo è un compito impegnativo. Quando il testo delle celle della tabella è diventato troppo lungo/lungo, la larghezza della colonna cambierà automaticamente. Per correggere la larghezza della colonna della tabella, utilizzare la proprietà "Layout della tabella" e impostare il suo valore come "fisso".

Questo post dimostrerà:

• Come fare un tavolo in HTML?
• Come impostare costante di larghezza della colonna della tabella indipendentemente dalla lunghezza del testo?

Come fare un tavolo in HTML?

Per creare una tabella in HTML, prova la procedura di seguito.

Passaggio 1: crea una tabella

Innanzitutto, crea un tavolo con l'aiuto di "

"Tag e inserire il"confine"Attributo per impostare il bordo attorno al tavolo.

Passaggio 2: aggiungi righe e cella di intestazione

Quindi, aggiungi le righe della tabella con "

"Tag e aggiungi le celle di intestazioni utilizzando il""Tag:

". Il testo dell'intestazione è definito tra il "	"Tag: Passaggio 3: Aggiungi celle di dati Per aggiungere le celle di dati, il "	Il tag è usato tra il "

Nome di battesimo	Cognome	Indirizzo
Hafsi	rana	Casa n. 3 Regno Unito
Jenny	Mughal	Casa n. 219 Turchia
Mari	Awan	Casa n. 487 Canada

La tabella è stata creata correttamente:

Come impostare costante di larghezza della colonna della tabella indipendentemente dalla lunghezza del testo?

Per impostare la larghezza della colonna che è costante indipendentemente dalla quantità di testo, seguire le istruzioni di seguito.

Passaggio 1: imposta il layout della tabella

Innanzitutto, accedi alla tabella in CSS con l'aiuto del nome del tag. Quindi, applica il "Table-Layout"Proprietà e imposta il valore"fisso"Per rendere costante la larghezza delle cellule della tabella.

Passaggio 2: applicare altre proprietà CSS

Per lo styling della tabella, utilizzare le proprietà codificate di seguito:

tavolo
Table-Layout: fisso;
bordo: 2px solido RGB (240, 113, 10);
larghezza: 200px;
Margine: auto;
Background-color: RGB (245, 210, 210);

Qui:

• IL "confine"È una proprietà stensa usata per definire il bordo, lo stile del bordo, la larghezza e il colore.
• Successivamente, il "larghezza"È utilizzato per impostare la larghezza dell'elemento.
• IL "margine"Determina il lato esterno dello spazio il limite definito.
• Poi il "colore di sfondo"Proprietà utilizzata per impostare il colore di sfondo sul retro dell'elemento.

Produzione

Passaggio 3: impostare la larghezza della cella della tabella

Accedi alle celle della tabella come l'intestazione e le celle di dati utilizzando "th" E "td":

th, td
Bordo: 2px Solid RGB (14, 156, 250);
Overflow: nascosto;
larghezza: 150px;

Qui, il "overflow"La proprietà è impostata come nascosta. Questa proprietà specifica cosa dovrebbe accadere se il contenuto trabocca nelle celle della tabella.

Produzione

Abbiamo dimostrato il metodo per impostare costante la larghezza della colonna della tabella.

Conclusione

Per impostare costante la larghezza della colonna della tabella, prima, crea una tabella utilizzando il "

"Tag. Quindi, usa il "Table-Layout"Proprietà CSS e impostare il suo valore come"fisso"Per correggere la dimensione del layout del tavolo. Successivamente, applica altre proprietà CSS, come "larghezza "," bordo "," overflow "e" margine"Proprietà, per modellare il tavolo. Questo post ha dimostrato il metodo per impostare costante la colonna della tabella indipendentemente dal testo nelle sue celle.

• « Più di 1 riga in <Input type=”textarea” />
• Perché l'altezza non funziona al 100% per espandere i div all'altezza dello schermo? »