1. meetod: HTML-i 'laiuse' atribuudi kasutamine
' laius ” on HTML-i põhiatribuut. See määrab HTML-elemendi laiuse või horisontaalse pikkuse. Tabeliandmete parandamiseks kasutatakse alltoodud sammudes atribuuti width.
1. samm: looge tabel 2. samm: lisage tabeli elemendile CSS-i atribuudid 3. samm: atribuutide määramine elemendile 'td'. 4. samm: atribuutide määramine elemendile Väljund kuvatakse järgmiselt: Ülaltoodud hetktõmmis näitab, et kõik veeru laiused on fikseeritud 30%. CSS-i atribuuti nth-child() kasutatakse fikseeritud laiusega tabeli loomiseks. See atribuut saab veeru numbri ja valib Ülaltoodud koodiploki väljund on: See väljund näitab, et veeru numbrid 1 ja 3 on fikseeritud 10% laiusele. Sees ' laud ' jaotisesse CSS-i osasse lisage ' tabeli paigutus: fikseeritud ' atribuut andmetabeli elementide 'laiuse' määramiseks: Lisage HTML-faili ' Pärast ülaltoodud koodilõigu täitmist on väljund: Nii saab kasutaja määrata tabeliandmete Tabeliandmete laiuse fikseerimiseks kasutage ' laius 'atribuut', ' n-laps( ) ' eraldaja ja '
HTML-failis kasutage ' ” ja „ ” märgistab ja kirjuta sinna andmed:
< Keskus >
< laud >
< tr >
< th > Nimi < / th >
< th > Olek < / th >
< th > Ruum nr < / th >
< / tr >
< tr >
< td > Fakhar < / td >
< td > Üliõpilane < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > Omar < / td >
< td > Üliõpilane < / td >
< td > 06 < / td >
< / tr >
< / laud >
< / Keskus >
Kasutage CSS-is tabelielementide valijat ja lisage ' piir ' 1 pikslit täispunane, ' teksti joondamine ' joondab teksti keskele ja ' laius ”, mis määrab tabeli laiuseks 80%:
laud {
piir : 1px ühtlane punane;
tekst- joondada : Keskus;
laius : 80 %; }
Kasuta ' td elemendi valija ja määrab ääris-alumine ' 5 pikslit ühevärviline punane, ' polsterdus 20 pikslit, et muuta üksus silmapaistvamaks, ja ' laius ” seab 30%:
td {
ääris-alumine: 5px ühevärviline punane;
polster: 20px;
laius : 30 %;
}
Kasuta ' th ' elemendi valija ' värvi muutmiseks ääris-alumine ” punasest mereroheliseks, et luua parem visualiseerimine:
th {
ääris-alumine: 5 pikslit mereroheline;
polster: 20px;
laius : 30 %;
}
2. meetod: valija “nth-child( )” kasutamine
” ja „ ” sildid. Näiteks laius on ' fikseeritud 'ainult veergude numbrite jaoks' 1 ” ja „ 3 ”. Kõigi nende veergude laius on 10%. See artikkel on edukalt näidanud, kuidas andmetabeli laiust parandada. td:nth-laps ( 3 ) {
laius : 10 %;
}
th:nth-laps ( 1 ) {
laius : 10 %;
}
3. meetod: märgendi
tabeli paigutus: fikseeritud;
laius : 80 %;
piir : 1px ühtlane punane;
tekst- joondada : Keskus;
}
< kol stiilis = 'laius: 15%;' / >
< kol stiilis = 'laius: 30%;' / >
elementide laiuse.
Järeldus
elementide laiust.