آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 349 ۱۰ بهمن ۹۵

در این جلسه با یه ترفند حرفه ای و پیشرفته دیگه در خدمتتون هستیم و امیدواریم که بتونید از اون استفاده کنید.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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :