Kako popraviti td širinu CSS tablice?

Kako Popraviti Td Sirinu Css Tablice



HTML pruža ' ” oznaka za izradu tablica i programer može popraviti širinu podataka tablice “ ” element. Svrha je usvojiti promjene koje se događaju tijekom promjene veličine zaslona ili izbrisati dodatne prostore koje zauzima tablica. Ovaj će članak pokazati kako popraviti podatke tablice ' ' elementi.

Metoda 1: Korištenje HTML atributa “width”.

' širina ” je osnovni atribut koji pruža HTML. Postavlja širinu ili horizontalnu duljinu HTML elementa. Za ispravljanje podataka tablice, atribut širine koristi se u koracima u nastavku.

Korak 1: Napravite tablicu
U HTML datoteci upotrijebite ' ” za prikaz svakog elementa unutar njega u središtu web stranice. Unutar njega konstruirajte tablicu koristeći ' ”,” ' i ' ” oznake i upišite podatke u nju:







< centar >
< stol >
< tr >
< th > Ime < / th >
< th > Status < / th >
< th > soba br < / th >
< / tr >
< tr >
< td > Fakhar < / td >
< td > Student < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > Omar < / td >
< td > Student < / td >
< td > 06 < / td >
< / tr >
< / stol >
< / centar >

Korak 2: Dodajte CSS svojstva elementu 'table'.
Koristite selektor elementa tablice u CSS-u i dodajte ' granica ” od 1 px puno crveno, “ poravnanje teksta ” poravnava tekst prema sredini, a “ širina ” koji postavlja ukupnu širinu tablice na 80%:



stol {
granica : 1px puno crveno;
tekst- uskladiti : centar;
širina : 80 %; }

Korak 3: Dodjeljivanje svojstava elementu 'td'.
Koristiti ' td ” selektor elementa i postavlja „ granica-dno ” od 5 px puno crveno, “ podstava ” od 20 px kako bi stavka bila istaknutija i “ širina ” postavlja na 30%:



td {
rub-bottom: 5px puno crveno;
padding:20px;
širina : 30 %;
}

Korak 4: Dodjeljivanje svojstava 'tom' elementu
Koristiti ' th ” selektor elementa za promjenu boje “ granica-dno ” od crvene do morsko zelene za stvaranje bolje vizualizacije:





th {
rub-bottom: 5px puna morskozelena;
padding:20px;
širina : 30 %;
}

Izlaz se prikazuje kao:



Gornja snimka pokazuje da su širine svih stupaca fiksne na 30%.

Metoda 2: Korištenje selektora “nth-child( )”.

Svojstvo nth-child() CSS-a koristi se za stvaranje tablice fiksne širine. Ovo svojstvo dobiva broj stupca i odabire ' ' i ' ' oznake. Na primjer, širina je ' fiksni ” samo za brojeve stupaca “ 1 ' i ' 3 ”. Svaki od ovih stupaca dobiva širinu od 10%. Ovaj je članak uspješno pokazao kako popraviti širinu podatkovne tablice.

td:n-to dijete ( 3 ) {
širina : 10 %;
}
th:nth-dijete ( 1 ) {
širina : 10 %;
}

Izlaz gornjeg bloka koda je:

Ovaj izlaz prikazuje da su brojevi stupaca 1 i 3 fiksirani na širinu od 10%.

Metoda 3: Korištenje oznake

Unutar ' stol ' u CSS dijelu dodajte ' raspored tablice: fiksno ” za postavljanje “širine” elemenata podatkovne tablice:

stol {
raspored tablice: fiksni;
širina : 80 %;
granica : 1px puno crveno;
tekst- uskladiti : centar;
}

U HTML datoteku dodajte ' ” unutar oznake „ ” odjeljak. Na primjer, popravite širinu od 15% za prvi stupac i 30% za drugi stupac:

< stol >
< kol stil = 'širina: 15%;' / >
< kol stil = 'širina: 30%;' / >

Nakon izvršavanja gornjeg isječka koda, izlaz je:

Na taj način korisnik može popraviti širinu podataka tablice elemenata.

Zaključak

Da biste popravili širinu podataka tablice, koristite ' širina 'atribut', n-to dijete( ) ” razdjelnik i “ ” metode oznaka. ' širina ” svojstvo postavlja fiksnu širinu. Razdjelnik “nth-child( )” dobiva broj stupca kao parametar. Nadalje, “ ” može se upotrijebiti da tablica ne bude fleksibilna. Ovaj je članak pokazao kako popraviti širinu podataka tablice elemenata.