تنظیم عرض و ارتفاع جدول در CSS
در طراحی وب، جداول نقش مهمی در نمایش داده‌های ساختاریافته دارند. کنترل دقیق ابعاد جدول و سلول‌های آن از جمله عرض (width) و ارتفاع (height) برای ایجاد ظاهری حرفه‌ای ضروری است. در این مقاله به روش‌های مختلف تنظیم این ویژگی‌ها می‌پردازیم.
توجه: برای یادگیری عمیق‌تر می‌توانید به این صفحه بروید که شامل مثال‌های کاربردی است.
تنظیم عرض جدول
برای تعیین عرض جدول می‌توانید از واحدهای مختلفی استفاده کنید:
- پیکسل (px): مقدار ثابتی که به دستگاه وابسته نیست
- درصد (%): نسبت به عنصر والد محاسبه می‌شود
- واحدهای نسبی (vw, rem): متناسب با ابعاد صفحه تغییر می‌کنند
| ویژگی |
مثال |
توضیح |
| width |
width: 80%; |
عرض جدول را 80% والد تنظیم می‌کند |
| min-width |
min-width: 300px; |
حداقل عرض جدول را مشخص می‌کند |
| max-width |
max-width: 1000px; |
حداکثر عرض ممکن را تعیین می‌کند |
تنظیم ارتفاع جدول
برخلاف عرض، تنظیم ارتفاع جدول نیاز به دقت بیشتری دارد زیرا محتوا معمولاً ارتفاع را تعیین می‌کند. با این حال در موارد خاص می‌توان از این ویژگی‌ها استفاده کرد:
- height: برای تعیین ارتفاع ثابت
- min-height: حداقل ارتفاع مورد نیاز
- max-height: محدود کردن حداکثر ارتفاع
نکته مهم: هنگام استفاده از ارتفاع ثابت، ممکن است محتوا از سلول خارج شود. برای حل این مشکل می‌توانید از overflow استفاده کنید.
تنظیم ابعاد سلول‌ها
برای کنترل ابعاد سلول‌های جدول (td/th) می‌توانید از همان ویژگی‌های width و height استفاده کنید. اما چند نکته کلیدی وجود دارد:
| مشکل رایج |
راه حل |
| عدم رعایت عرض تعیین شده |
استفاده از table-layout: fixed |
| تراز نشدن ارتفاع سلول‌ها |
تعیین height برای سطر (tr) |
در نهایت، برای طراحی جداول واکنش‌گرا (Responsive) در دستگاه‌های مختلف، بهتر است از ترکیب واحدهای نسبی و ویژگی‌های min/max استفاده کنید. برای جزئیات بیشتر پیشنهاد می‌کنیم به این صفحه بروید و مثال‌های عملی را مشاهده کنید.
