Tapa 1: HTML:n 'width'-attribuutin käyttäminen
' leveys ” on HTML:n tarjoama perusattribuutti. Se määrittää HTML-elementin leveyden tai vaakasuuntaisen pituuden. Taulukon tietojen korjaamiseen käytetään leveysattribuuttia alla olevissa vaiheissa.
Vaihe 1: Luo taulukko Vaihe 2: Lisää CSS-ominaisuudet 'taulukko'-elementtiin Vaihe 3: Ominaisuuksien määrittäminen 'td'-elementille Vaihe 4: Ominaisuuksien määrittäminen 'th' elementille Lähtö näkyy seuraavasti: Yllä oleva tilannekuva osoittaa, että kaikkien sarakkeiden leveydet on kiinteä 30 %. CSS:n nth-child()-ominaisuutta käytetään kiinteän levyisen taulukon luomiseen. Tämä ominaisuus saa sarakkeen numeron ja valitsee ' Yllä olevan koodilohkon tulos on: Tämä tulos näyttää, että sarakkeiden numerot 1 ja 3 on kiinnitetty 10 %:n leveyteen. Sisällä ' pöytä '-osio CSS-osaan lisää ' pöytäasetelma: kiinteä ' -ominaisuus määrittää tietotaulukon elementtien 'leveys': Lisää HTML-tiedostoon ' Yllä olevan koodinpätkän suorittamisen jälkeen tulos on: Näin käyttäjä voi korjata taulukon datan Voit korjata taulukon tietojen leveyden käyttämällä ' leveys 'määrite', ' n-lapsi( ) ' erotin ja '
Käytä HTML-tiedostossa ' ' ja ' ”-tunnisteet ja kirjoita siihen dataa:
< keskusta >
< pöytä >
< tr >
< th > Nimi < / th >
< th > Tila < / th >
< th > Huone numero < / th >
< / tr >
< tr >
< td > Fakhar < / td >
< td > Opiskelija < / td >
< td > 06 < / td >
< / tr >
< tr >
< td > Omar < / td >
< td > Opiskelija < / td >
< td > 06 < / td >
< / tr >
< / pöytä >
< / keskusta >
Käytä taulukkoelementin valitsinta CSS:ssä ja lisää ' rajaa ' 1px kiinteä punainen, ' tekstin tasaus ' tasaa tekstin keskelle ja ' leveys ', joka asettaa taulukon kokonaisleveydeksi 80 %:
pöytä {
rajaa : 1px tasainen punainen;
teksti- kohdistaa : keskus;
leveys : 80 %; }
Käytä ' td ' -elementin valitsin ja asettaa ' raja-ala ' 5px tasainen punainen, ' pehmuste ' 20 kuvapisteen, jotta kohde tulee näkyvämpi, ja ' leveys ” asettaa 30 %:ksi:
td {
reuna-ala: 5px tasainen punainen;
täyte: 20px;
leveys : 30 %;
}
Käytä ' th ' elementin valitsin muuttaaksesi ' väriä raja-ala ” punaisesta merenvihreään luodaksesi paremman visualisoinnin:
th {
reuna-ala: 5px kiinteä merenvihreä;
täyte: 20px;
leveys : 30 %;
}
Tapa 2: 'nth-child( )' -valitsimen käyttäminen
' ja ' ”tunnisteet. Esimerkiksi leveys on ' korjattu ' vain sarakenumeroille ' 1 ' ja ' 3 ”. Jokaisen sarakkeen leveys on 10 %. Tämä artikkeli on osoittanut onnistuneesti, kuinka tietotaulukon leveys korjataan. td:nth-lapsi ( 3 ) {
leveys : 10 %;
}
th:nth-lapsi ( 1 ) {
leveys : 10 %;
}
Tapa 3:
taulukon asettelu: kiinteä;
leveys : 80 %;
rajaa : 1px tasainen punainen;
teksti- kohdistaa : keskus;
}
< kol tyyli = 'leveys: 15%;' / >
< kol tyyli = 'leveys: 30%;' / >
elementtien leveyden.
Johtopäätös
-elementtien leveys korjataan.