Metode 1: Bruke HTML 'width'-attributt
« bredde ” er et grunnleggende attributt levert av HTML. Den angir bredden eller den horisontale lengden på HTML-elementet. For å fikse tabelldata, brukes width-attributtet i trinnene nedenfor.
Trinn 1: Lag en tabell Trinn 2: Legg til CSS-egenskaper til 'tabell'-elementet Trinn 3: Tilordne egenskaper til 'td' Element Trinn 4: Tilordne egenskaper til 'th' element Utgang vises som: Øyeblikksbildet ovenfor viser at alle kolonnebredder er fastsatt til 30 % hver. Egenskapen nth-child() til CSS brukes til å lage en tabell med fast bredde. Denne egenskapen får kolonnenummeret og velger ' Utgangen fra kodeblokken ovenfor er: Denne utgangen viser at kolonnenummer 1 og 3 er fiksert til bredden 10 %. Inne i ' bord '-delen i CSS-delen legg til ' bordoppsett: fast '-egenskapen for å angi 'bredden' til datatabellelementer: I HTML-filen legger du til ' Etter å ha utført kodebiten ovenfor, er utdataene: Det er hvordan brukeren kan fikse bredden på tabelldata For å fikse bredden på tabelldataene, bruk ' bredde ' Egenskap, ' nth-child( ) ' separator, og '
I HTML-filen bruker du en ' ' og ' '-tagger og skriv data i den:
< senter >
< bord >
< tr >
< th > Navn < / th >
< th > Status < / th >
< th > Rom nei < / th >
< / tr >
< tr >
< td > Fakhar < / td >
< td > Student < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > Omar < / td >
< td > Student < / td >
< td > 06 < / td >
< / tr >
< / bord >
< / senter >
Bruk tabellelementvelgeren i CSS og legg til ' grense ' av 1px solid rødt, ' tekstjustering ' justerer teksten til midten, og ' bredde ” som setter den totale bredden på tabellen til 80 %:
bord {
grense : 1px solid rødt;
tekst- tilpasse : senter;
bredde : 80 %; }
Bruke ' td ' elementvelger og setter ' grense-bunn ' av 5 px solid rødt, ' polstring ' på 20 piksler for å gjøre elementet mer fremtredende, og ' bredde ' angir som 30 %:
td {
border-bottom: 5px solid rød;
polstring:20px;
bredde : 30 %;
}
Bruke ' th ' elementvelger for å endre fargen på ' grense-bunn ” fra rødt til sjøgrønt for å skape en bedre visualisering:
th {
border-bottom: 5px solid sjøgrønn;
polstring:20px;
bredde : 30 %;
}
Metode 2: Bruke 'nth-child( )'-velgeren
' og ' '-tagger. For eksempel er bredden ' fikset ' for kun kolonnenummer ' 1 ' og ' 3 '. Hver av disse kolonnene får en bredde på 10 %. Denne artikkelen har demonstrert hvordan du fikser datatabellbredden. td:nth-barn ( 3 ) {
bredde : 10 %;
}
th:nth-barn ( 1 ) {
bredde : 10 %;
}
Metode 3: Bruke
bordoppsett: fast;
bredde : 80 %;
grense : 1px solid rødt;
tekst- tilpasse : senter;
}
< kol stil = 'bredde: 15%;' / >
< kol stil = 'bredde: 30%;' / >
-elementer.
Konklusjon
-elementer.