Metod 1: Använd HTML-attributet 'width'.
den ' bredd ” är ett grundläggande attribut som tillhandahålls av HTML. Den ställer in bredden eller den horisontella längden på HTML-elementet. För att fixa tabelldata används width-attributet i stegen nedan.
Steg 1: Skapa en tabell Steg 2: Lägg till CSS-egenskaper till 'tabell'-elementet Steg 3: Tilldela egenskaper till 'td' element Steg 4: Tilldela egenskaper till 'th' element Utdata visas som: Ovanstående ögonblicksbild visar att alla kolumns bredder är fixerade till 30 % vardera. Egenskapen nth-child() för CSS används för att skapa en tabell med fast bredd. Den här egenskapen får kolumnnumret och väljer ' Utdata från ovanstående kodblock är: Denna utdata visar att kolumnnummer 1 och 3 är fixerade till bredden 10 %. Inuti ' tabell ' i CSS-delen lägg till ' bordslayout: fast ' egenskap för att ställa in 'bredden' på datatabellelement: I HTML-filen lägger du till ' Efter att ha kört ovanstående kodavsnitt är utdata: Det är så användaren kan fixa bredden på tabelldata För att fixa bredden på tabelldata, använd ' bredd ' attribut, ' n:te barn( ) 'avskiljare och'
I HTML-filen, använd en ' ' och ' ' taggar och skriv data i den:
< Centrum >
< tabell >
< tr >
< th > namn < / th >
< th > Status < / th >
< th > Rum Nej < / th >
< / tr >
< tr >
< td > Fakhar < / td >
< td > Studerande < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > Omar < / td >
< td > Studerande < / td >
< td > 06 < / td >
< / tr >
< / tabell >
< / Centrum >
Använd tabellelementväljaren i CSS och lägg till ' gräns ' av 1px fast rött, ' textjustera ' justerar texten till mitten, och ' bredd ” som ställer in tabellens totala bredd till 80 %:
tabell {
gräns : 1px fast röd;
text- justera : Centrum;
bredd : 80 %; }
Använd ' td ' elementväljare och ställer in ' gräns-botten ' av 5px fast rött, ' stoppning ” på 20px för att göra objektet mer framträdande, och ” bredd ” anges som 30 %:
td {
border-bottom: 5px fast röd;
stoppning:20px;
bredd : 30 %;
}
Använd ' th ' elementväljare för att ändra färgen på ' gräns-botten ” från rött till havsgrönt för att skapa en bättre visualisering:
th {
border-bottom: 5px fast sjögrön;
stoppning:20px;
bredd : 30 %;
}
Metod 2: Använd 'nth-child( )'-väljaren
' och ' '-taggar. Till exempel är bredden ' fast ' endast för kolumnnummer ' 1 ' och ' 3 ”. Var och en av dessa kolumner får en bredd på 10 %. Den här artikeln har framgångsrikt visat hur man fixar datatabellbredden. td:nth-child ( 3 ) {
bredd : 10 %;
}
th:n:e-barn ( 1 ) {
bredd : 10 %;
}
Metod 3: Använd
bordslayout: fast;
bredd : 80 %;
gräns : 1px fast röd;
text- justera : Centrum;
}
< kol stil = 'bredd: 15%;' / >
< kol stil = 'bredd: 30%;' / >
-element.
Slutsats
.