1. način: Uporaba atributa »širina« HTML
' premer ” je osnovni atribut, ki ga nudi HTML. Nastavi širino ali vodoravno dolžino elementa HTML. Za popravljanje podatkov tabele se v spodnjih korakih uporabi atribut širine.
1. korak: ustvarite tabelo 2. korak: dodajte lastnosti CSS v element »table«. 3. korak: Dodeljevanje lastnosti elementu »td«. 4. korak: Dodeljevanje lastnosti »th« elementu Izhod je prikazan kot: Zgornji posnetek prikazuje, da so širine vseh stolpcev fiksne na 30 %. Lastnost nth-child() CSS se uporablja za ustvarjanje tabele s fiksno širino. Ta lastnost pridobi številko stolpca in izbere » Rezultat zgornjega bloka kode je: Ta rezultat prikazuje, da sta številki stolpca 1 in 3 fiksni na širino 10 %. Znotraj ' tabela « v delu CSS dodajte » postavitev tabele: fiksna ” za nastavitev “širine” elementov podatkovne tabele: V datoteko HTML dodajte » Po izvedbi zgornjega delčka kode je rezultat: Tako lahko uporabnik določi širino podatkovnih elementov tabele Če želite popraviti širino podatkov tabele, uporabite » premer »atribut« n-ti otrok( ) ' ločilo in '
V datoteki HTML uporabite » « in » ” in vanjo zapišite podatke:
< center >
< tabela >
< tr >
< th > Ime < / th >
< th > Stanje < / th >
< th > soba št < / th >
< / tr >
< tr >
< td > Fakhar < / td >
< td > študent < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > Omar < / td >
< td > študent < / td >
< td > 06 < / td >
< / tr >
< / tabela >
< / center >
Uporabite izbirnik elementov tabele v CSS in dodajte » meja ” od 1 slikovne pike polno rdeče, “ poravnava besedila ” poravna besedilo na sredino in “ premer ”, ki nastavi celotno širino tabele na 80 %:
tabela {
meja : 1px polna rdeča;
besedilo- poravnati : center;
premer : 80 %; }
Uporabi ' td ' izbirnik elementov in nastavi ' obroba-spodnja ” od 5 slikovnih pik polno rdeče, “ oblazinjenje ” 20 slikovnih pik, da bo element bolj viden, in “ premer ” nastavi na 30 %:
td {
obroba-spodnja: 5px polna rdeča;
oblazinjenje:20px;
premer : 30 %;
}
Uporabi ' th ' izbirnik elementov za spreminjanje barve ' obroba-spodnja ” iz rdeče v morsko zeleno, da ustvarite boljšo vizualizacijo:
th {
obroba-spodnja: 5px polna morskozelena;
oblazinjenje:20px;
premer : 30 %;
}
2. način: Uporaba izbirnika »nth-child( )«.
« in » ” oznake. Na primer, širina je ' fiksno ' samo za številke stolpcev ' 1 « in » 3 ”. Vsak od teh stolpcev dobi 10 % širino. Ta članek je uspešno pokazal, kako popraviti širino podatkovne tabele. td:n-ti otrok ( 3 ) {
premer : 10 %;
}
th:nth-otrok ( 1 ) {
premer : 10 %;
}
3. način: Uporaba oznake
postavitev tabele: fiksna;
premer : 80 %;
meja : 1px polna rdeča;
besedilo- poravnati : center;
}
< col stil = 'širina: 15%;' / >
< col stil = 'širina: 30%;' / >
.
Zaključek
elementov.