ترفندهای حرفه ای و پیشرفته Front End (جلسه ۱۶) : چارچوب ثابت برای جداول یا Fixed Table – قسمت ۲

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

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

حالا بیاید یک مثال عملی رو با هم کار کنیم. کدهای HTML زیر رو در نظر بگیرید:

ID Name Job Email
۰۰۰۱ Johnny Five Robotin' [email protected]
۰۰۰۲ Super Superlonglastnamesmith Doin' stuff [email protected]
۰۰۰۳ Roger Wilco Truckdrivin' [email protected]
۰۰۰۴ Mad Hatter Hat Makin' [email protected]

همونطور که دیدید یک table با کلاس users قرار دادیم و چهار ردیف رو برای اون تعریف کردیم و در هر ردیف اطلاعاتی رو قرار دادیم. کدهای CSS زیر رو برای این جدول قرار دادیم:

.users {
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}
/* Column widths are based on these cells */
.row-ID {
  width: 10%;
}
.row-name {
  width: 40%;
}
.row-job {
  width: 30%;
}
.row-email {
  width: 20%;
}
.users td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.users th {
  background: darkblue;
  color: white;
}
.users td,
.users th {
  text-align: left;
  padding: 5px 10px;
}
.users tr:nth-child(even) {
  background: lightblue;
}

همونطور که دیدید در ابتدا برای این جدول ویژگی table-layout: fixed; رو قرار دادیم و با اینکار باعث میشیم که چارچوب جدول نسبت به ردیف اول قرار داده بشه و هر استایلی که برای ردیف اول قرار بدین، استایل کل ستونها رو مشخص کنه. تکه کد زیر در کد بالا رو نگاه کنید:

.row-ID {
  width: 10%;
}
.row-name {
  width: 40%;
}
.row-job {
  width: 30%;
}
.row-email {
  width: 20%;
}

با اینکار عرض سلولهای ردیف اول رو مشخص کردیم و چون جدول ما fixed هست، کل ردیف‌ها بهمین صورت استایل دهی خواهند شد. با استفاده از کد زیر هم کاری کردیم که اگر متن زیاد بود و خواست از سلول بیرون بزنه، مخفی بشه و جای اون … قرار بگیره:

.users td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

اگر کد بالا رو درون مرورگر باز کنید، خروجی بصورت زیر خواهد بود:table fixed

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

برای مطالعه بیشتر در مورد المنت Table میتونین به این لینک مراجعه کنید. برای مطالعه بیشتر هم در مورد table-layout میتونین به این لینک مراجعه کنید.

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

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟











نویسنده
محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

تگ ها:

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0