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

- visibility ۰ mode_comment

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

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

روش 3 : استفاده از ویژگی border-style

این روش نسبت به روشهای قبلی، ترفند بهتری حساب میشه. با قرار دادن border-style: hidden برای جدول مورد نظر، همه border دور تا دور جدول مخفی میشه و به راحتی به هدفمون میرسیم. کدهای CSS بصورت زیر میشه:

میبینید که برای همه سلولها border قرار دادیم و برای المنت جدول هم border-style: hidden رو قرار دادیم. با اینکار border های همه جا بجز دور تا دور جدول نمایش داده میشن. دموی خروجی بصورت زیر هست: اگر توضیحاتی که درون سایت MDN در مورد ویژگی border-style بخونید، نقل شده که:

در مواردی که border های جدول collapse هستن، قرار دادن مقدار hidden برای این ویژگی، بالاترین ارجحیت رو دارد. یعنی اگر استایلهای دیگه برای اون border تعریف شده باشه، این مورد بقیه رو بازنویسی میکنه و در نتیجه چیزی در خروجی نمایش داده نخواهد شد.

بهمین راحتی.

روش 4 : استفاده از Adjacent selector

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

میبینید که با استفاده از این انتخابگر گفتیم که هر td که بعد از td دیگه ای قرار داده شده، براش یک border-left قرار بده. با اعمال این کد به جدول مورد نظرمون، خروجی بصورت زیر خواهد شد:inside-borders 2

خب بعد از اینکار کد زیر رو قرار میدیم:

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

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

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

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

موفق باشید

یا علی

Source

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

نیاز به لاگین

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