آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

0 251 ۷ بهمن ۹۵

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

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram