Kaip pataisyti CSS lentelės td plotį?

• HTML naudojimas “ plotis “ Atributas
• Naudojant „ n-asis vaikas () “ parinkiklis
• Naudojant „ “ Žyma

1 būdas: HTML atributo „plotis“ naudojimas

„ plotis “ yra pagrindinis HTML atributas. Jis nustato HTML elemento plotį arba horizontalų ilgį. Lentelės duomenims pataisyti toliau nurodytuose veiksmuose naudojamas pločio atributas.

1 veiksmas: sukurkite lentelę
HTML faile naudokite „ “ žymą, kad kiekvienas jos viduje esantis elementas būtų rodomas tinklalapio centre. Jo viduje sukurkite lentelę naudodami „ ',' “ ir „ “ žymas ir įrašykite duomenis:

2 veiksmas: pridėkite CSS ypatybes prie „lentelės“ elemento
Naudokite lentelės elementų parinkiklį CSS ir pridėkite „ siena ' iš 1 piks. vientisai raudona, ' teksto lygiavimas “ sulygiuoja tekstą centre ir „ plotis “, kuris nustato bendrą lentelės plotį iki 80 %:

3 veiksmas: ypatybių priskyrimas „td“ elementui
Naudoti ' td “ elementų parinkiklį ir nustato „ kraštinė-apačia “ iš 5 pikselių vientisai raudona, “ kamšalas “ 20 piks., kad elementas būtų ryškesnis, ir „ plotis “ nustatoma kaip 30 %:

4 veiksmas: ypatybių priskyrimas „-ajam“ elementui
Naudoti ' th “ elemento parinkiklis, kad pakeistumėte “ spalvą kraštinė-apačia “ nuo raudonos iki jūros žalios, kad būtų sukurta geresnė vizualizacija:

Išvestis rodoma taip:

Aukščiau pateikta momentinė nuotrauka rodo, kad visų stulpelių plotis yra 30 %.

2 būdas: „nth-child( )“ parinkiklio naudojimas

CSS ypatybė nth-child() naudojama fiksuoto pločio lentelei sukurti. Ši nuosavybė gauna stulpelio numerį ir pasirenka „ “ ir „ “ žymas. Pavyzdžiui, plotis yra ' fiksuotas “ tik stulpelių numeriams “ 1 “ ir „ 3 “. Kiekvieno iš šių stulpelių plotis yra 10%. Šiame straipsnyje sėkmingai parodyta, kaip nustatyti duomenų lentelės plotį.

Aukščiau pateikto kodo bloko išvestis yra:

Ši išvestis rodo, kad stulpelių numeriai 1 ir 3 yra fiksuoti iki 10 % pločio.

3 būdas: žymės naudojimas

Viduje ' stalo “ skiltyje CSS dalyje pridėkite „ stalo išdėstymas: fiksuotas “ ypatybė, skirta duomenų lentelės elementų „pločiui“ nustatyti:

HTML faile pridėkite „ ' žyma '' viduje ' skyrius. Pavyzdžiui, pirmame stulpelyje nustatykite 15%, o antrojo stulpelio plotį 30%.

Įvykdžius aukščiau pateiktą kodo fragmentą, išvestis yra tokia:

Taip vartotojas gali nustatyti lentelės duomenų elementų plotį.

Išvada

Norėdami nustatyti lentelės duomenų plotį, naudokite „ plotis 'atributas', ' n-tas vaikas ( ) “ skyriklis ir “ “ žymėjimo metodai. „ plotis “ ypatybė nustato fiksuotą plotį. Skirtiklis „nth-child( )“ gauna stulpelio numerį kaip parametrą. Be to, „ “ žyma gali būti naudojama, kad lentelė nebūtų lanksti. Šiame straipsnyje parodyta, kaip nustatyti lentelės duomenų elementų plotį.