Metode 1: Brug af HTML 'width'-attribut
Det ' bredde ” er en grundlæggende egenskab leveret af HTML. Den indstiller HTML-elementets bredde eller vandrette længde. For at rette tabeldata bruges width-attributten i nedenstående trin.
Trin 1: Opret en tabel Trin 2: Tilføj CSS-egenskaber til 'tabel'-elementet Trin 3: Tildeling af egenskaber til 'td' Element Trin 4: Tildeling af egenskaber til 'th' element Output vises som: Ovenstående snapshot viser, at alle kolonnebredder er fastsat til 30 % hver. Egenskaben nth-child() i CSS bruges til at oprette en tabel med fast bredde. Denne egenskab får kolonnenummeret og vælger ' Outputtet af ovenstående kodeblok er: Dette output viser, at kolonnenummer 1 og 3 er fastgjort til bredden 10 %. Inde i ' bord '-afsnittet i CSS-delen tilføj ' bord-layout: fast ' egenskab for at indstille 'bredden' af datatabelelementer: I HTML-filen skal du tilføje ' Efter at have udført ovenstående kodestykke, er outputtet: Det er sådan, brugeren kan fikse bredden af tabeldata For at fastsætte bredden af tabeldataene skal du bruge ' bredde ' attribut, ' n. barn( ) ' separator og '
I HTML-filen skal du bruge en ' ' og ' ” tags og skriv data i det:
< centrum >
< bord >
< tr >
< th > Navn < / th >
< th > Status < / th >
< th > Værelse nr < / th >
< / tr >
< tr >
< td > Fakhar < / td >
< td > Studerende < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > Omar < / td >
< td > Studerende < / td >
< td > 06 < / td >
< / tr >
< / bord >
< / centrum >
Brug tabelelementvælgeren i CSS og tilføj ' grænse ' af 1px fast rød, ' tekstjustering ' justerer teksten til midten, og ' bredde ”, der sætter tabellens samlede bredde til 80 %:
bord {
grænse : 1px fast rød;
tekst- justere : center;
bredde : 80 %; }
Brug ' td ' elementvælger og indstiller ' grænse-bund ' af 5px fast rød, ' polstring ' på 20px for at gøre elementet mere fremtrædende, og ' bredde ” indstilles til 30 %:
td {
border-bottom: 5px fast rød;
polstring:20px;
bredde : 30 %;
}
Brug ' th ' elementvælger for at ændre farven på ' grænse-bund ” fra rød til havgrøn for at skabe en bedre visualisering:
th {
border-bottom: 5px solid søgrøn;
polstring:20px;
bredde : 30 %;
}
Metode 2: Brug af 'nth-child( )'-vælgeren
' og ' ” tags. For eksempel er bredden ' fast ' kun for kolonnenumre ' 1 ' og ' 3 ”. Hver af disse kolonner får en bredde på 10%. Denne artikel har med succes demonstreret, hvordan man fikser datatabellens bredde. td:nth-barn ( 3 ) {
bredde : 10 %;
}
th:nth-barn ( 1 ) {
bredde : 10 %;
}
Metode 3: Brug
bord-layout: fast;
bredde : 80 %;
grænse : 1px fast rød;
tekst- justere : center;
}
< col stil = 'bredde: 15%;' / >
< col stil = 'bredde: 30%;' / >
-elementer.
Konklusion
-elementer.