- HTML gebruiken ' breedte ” Attribuut
- Gebruik makend van ' n-kind() 'Keuze
- Gebruik makend van '
' Label
Methode 1: HTML-kenmerk 'breedte' gebruiken
De ' breedte ” is een basisattribuut dat wordt geleverd door HTML. Het stelt de breedte of horizontale lengte van het HTML-element in. Om tabelgegevens op te lossen, wordt het kenmerk width gebruikt in de onderstaande stappen.
Stap 1: Maak een tabel Stap 2: voeg CSS-eigenschappen toe aan het 'tabel'-element Stap 3: Eigenschappen toewijzen aan 'td' Element Stap 4: eigenschappen toekennen aan 'e' element Uitvoer wordt weergegeven als: De bovenstaande snapshot laat zien dat de breedte van alle kolommen elk op 30% is vastgesteld. De eigenschap nth-child() van CSS wordt gebruikt om een tabel met een vaste breedte te maken. Deze eigenschap krijgt het kolomnummer en selecteert de ' De uitvoer van het bovenstaande codeblok is: Deze uitvoer geeft aan dat kolomnummers 1 en 3 vast staan op een breedte van 10%. Binnen in de ' tafel ” sectie in het CSS-gedeelte voeg de “ tafelindeling: vast ” eigenschap om de 'breedte' van gegevenstabelelementen in te stellen: Voeg in het HTML-bestand de ' Na het uitvoeren van het bovenstaande codefragment is de uitvoer: Zo kan de gebruiker de breedte van tabelgegevens Gebruik de ' breedte ' attribuut, ' n-kind( ) ' scheidingsteken, en '
Gebruik in het HTML-bestand een ' ' En ' ”-tags en schrijf er gegevens in:
< centrum >
< tafel >
< tr >
< e > Naam < / e >
< e > Toestand < / e >
< e > Kamer nummer < / e >
< / tr >
< tr >
< td > Fakhar < / td >
< td > Student < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > Omar < / td >
< td > Student < / td >
< td > 06 < / td >
< / tr >
< / tafel >
< / centrum >
Gebruik de tabelelementkiezer in CSS en voeg de ' grens ” van 1px effen rood, “ tekst uitlijnen ” lijnt de tekst uit naar het midden, en “ breedte ” waarmee de totale breedte van de tabel wordt ingesteld op 80%:
tafel {
grens : 1px effen rood;
tekst- uitlijnen : centrum;
breedte : 80 %; }
Gebruik de ' td ” element selector en stelt de “ grens-bodem ” van 5px effen rood, “ opvulling ” van 20px om het item prominenter te maken, en “ breedte ” ingesteld als 30%:
td {
border-bottom: 5px effen rood;
opvulling:20px;
breedte : 30 %;
}
Gebruik de ' e ” elementkiezer om de kleur van “ grens-bodem ” van rood naar zeegroen om een betere visualisatie te creëren:
e {
border-bottom: 5px effen zeegroen;
opvulling:20px;
breedte : 30 %;
}
Methode 2: de selector 'nth-child( )' gebruiken
' En '
breedte : 10 %;
}
th:n-kind ( 1 ) {
breedte : 10 %;
}
Methode 3:
tafelindeling: vast;
breedte : 80 %;
grens : 1px effen rood;
tekst- uitlijnen : centrum;
}
< col stijl = 'breedte: 15%;' / >
< col stijl = 'breedte: 30%;' / >
-elementen bepalen.
Conclusie
-elementen kunt corrigeren.