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

- visibility ۰ mode_comment

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

در این مطلب و مطالب بعدی میخایم روشهایی که میشه با استفاده از اونا، جداولی رو ساخت که فقط border داخلی داشته باشه رو آموزش بدیم. شاید از این نوع جداول زیاد دیده باشید و محیط بازی تیک تاک تو هم به همین شکل هست. حالا یکی یکی روشها رو بهتون میگم و بصورت عملی اونا رو بهتون نشون میدم.

روش 1 : border هایی که بهشون نیاز ندارید رو حذف کنید!

روش اول و ساده ای که وجود داره اینه که به سادگی بیایم و اون border هایی که نیاز نداریم رو برداریم و حذف کنیم تا به هدفمون برسیم. پس در ابتدا برای همه قسمتها border قرار میدیم و بعد یکی یکی اون قسمتهایی که بیرون هستن رو برمیداریم. چیزایی که باید برداشته بشن بصورت زیر هستن:

  • border بالای همه سلولهای ردیف اول
  • border پایین همه سلولهای ردیف آخر
  • border چپ سلول اول هر ردیف
  • border راست سلول آخر هر ردیف

پس اگر جدولی بصورت زیر داشته باشیم:

کدهای CSS ما بصورت زیر میشن:

میبینید که با استفاده از دو rule اول برای همه سلولهای جدول border قرار دادیم. با استفاده از دستورهای بعدی و بهره گیری از قدرت کلاسهای کاذب تونستیم اون 4 تا مورد رو انتخاب و حذف کنیم و به این ترتیب خروجی بصورت زیر میشه:inside-borders 1

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

روش 2 : استفاده از ویژگی rules

این ویژگی برای استفاده درون سایت پیشنهاد نمیشه و فقط اونو بیان میکنیم تا با اون هم آشنایی پیدا کنید. این ویژگی درون HTML5 دیگه پشتیبانی نمیشه و deprecate شده و نباید از اون استفاده کنیم. ولی شما راحت با استفاده از این ویژگی میتونین به هدف مورد نظرتون برسید. این ویژگی برای المنت table تعریف میشه و مقادیری رو قبول میکنه و متناسب با هر مقدار، رفتار خاصی رو نشون میده. مثلا اگه rows بزاریم، خطوط بین ردیفها رو نشون میده و اگه cols رو بزاریم، خطوط بین ستونها رو نشون میده و اگر all بزاریم هم خطوط بین ردیفها و هم ستونها رو نمایش میده. پس ما میتونیم در اینجا فقط با استفاده از HTML این کار رو انجام بدیم. بصورت زیر:

دموی خروجی بصورت زیر هست: میبینید که به سادگی این کار رو انجام دادیم. شما حتی میتونین با استفاده از ویژگی border-color رنگ اونا رو تغییر بدین.

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

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

موفق باشید

یا علی

Source

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

نیاز به لاگین

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