ترفندهای حرفه ای و پیشرفته Front End (جلسه 22) : جداولی که فقط border داخلی دارند - قسمت 3

- visibility ۰ mode_comment

در این جلسه با یه ترفند حرفه ای و پیشرفته دیگه در خدمتتون هستیم و امیدواریم که بتونید از اون استفاده کنید.inside-borders

در جلسه های قبلی برای انجام این کار روشهایی رو بهتون آموزش دادیم. در این جلسه با ادامه روشها در خدمتتون هستیم.

روش 5 : استفاده ترکیبی از کلاسهای کاذب not و first-child

شما میتونین با استفاده از ترکیب کلاسهای کاذب first-child و not این کار رو به سادگی انجام بدین. در ابتدا کد زیر رو قرار میدیم:

همونطور که دیدید از ترکیب این دو کلاس همزمان استفاده کردیم. اگر فقط از first-child استفاده کنیم، باعث میشه که همه td هایی که در ردیف، فرزند اول هستن رو انتخاب کنه. حالا اگر کلاس not به همراه اون استفاده کردیم، همه چی برعکس میشه و درون همه ردیفها، همه td ها بجز td اول انتخاب میشه و border-left براشون قرار داده میشه. با اینکار بین همه ستونهای جدول border قرار میگیره. تا اینجای کار، جدول بصورت زیر میشه:inside-borders 6

مرحله بعد قرار دادن کد زیر هست:

همونطور که در کد بالا دیدید در ابتدا همه ردیفهای جدول بجز ردیف اول رو انتخاب کردیم و همه td های درون اونا رو هدف قرار دادیم و برای همه اونا border-top قرار دادیم. با اینکار بین ردیفهای جدول هم یک border قرار میگیره. بصورت تصویر زیر:inside-borders 7

خروجی و دموی نهایی هم بصورت زیر هست: بهمین راحتی.

روش 6 و آخر : استفاده از کلاس کاذب nth-child و شمارنده n

در این روش میایم و از کلاس کاذب nth-child استفاده میکنیم و درون اون عبارت n+2 رو قرار میدیم. همونطور که میدونید شمارنده n از 0 شروع میشه و یکی یکی زیاد میشه. پس اگر در عبارت بالا، بجای n عدد 0 رو قرار بدیم، حاصل عبارت عدد 2 خواهد شد و بهمین ترتیب یکی یکی بالا میره. پس اگر در ابتدا کد زیر رو قرار بدیم:

با اینکار همه td های دوم و سوم و ... درون هر ردیف انتخاب میشه و border-left براشون قرار داده میشه. خروجی تا اینجای کار بصورت زیر میشه:inside-borders 6

مرحله بعد کد زیر رو قرار میدیم:

با اینکار همه سلولهایی که درون ردیف 2 و 3 و ... هستن انتخاب میشن و ویژگی border-top براشون قرار داده میشه. نتیجه نهایی بصورت زیر میشه:inside-borders 7

دمو و خروجی بصورت زیر میشه: این کار فقط به این روشها محدود نمیشه و شاید راههای دیگه ای هم وجود داشته باشه.

در جلسات بعدی با ادامه نکات در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.