cssblog.ir logo
P

table-layout

غیرفعال سازی محاسبه خودکار عرض ستون ها در جدول

این مشخصه در تعیین نحوه محاسبه عرض ستون‌های جدول که معمولا بصورت خودکار محاسبه می شوند، کاربرد دارد

اندازه ستون‌های جداول معمولا بصورت پیشفرض توسط خود مرورگرها محاسبه و اعمال می‌شوند. مرورگرها با توجه به محتوای جدول‌ها عرض ستون‌ها را محاسبه کرده و برای هر ستون عرضی را در نظر می‌گیرند که معمولا نتایجی قابل قبولی نیز به همراه دارد. اما در برخی موارد ممکن است بخواهیم تا ستون‌های جدول را بصورت دستی و با استفاده از اعداد مشخص و معین، تقسیم کنیم. بخصوص در مواقعی که شما بیش از یک جدول در صفحه داشته باشید و این جداول بصورت پشت سر هم قرار گرفته باشند، ممکن است بخواهید ستون‌های معادل این جدول‌ها در یک راستا دیده شوند؛ در چنین مواقعی استفاده از مشخصه table-layoutبهترین گزینه می‌باشد.

با استفاده از مشخصه table-layoutمی‌توانیم تعیین کنیم که مرورگر چگونه و با چه روشی اندازه ستون‌های جدول را تعیین کند.

مقادیر قابل قبول table-layout

این مشخصه بصورت پیشفرض مقدارauto را دارد. اما می تواند مقدارهای زیر را نیز قبول کند:

fixed

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

inherit

باعث می شود تا مقدار این مشخصه از مقدار موجود برای والد به ارث برده شود.

همانطور که در لیست مقادیر مشاهده نمودید در حال حاضر تنها مقدار متفاوت و قابل بحث، مقدارfixed می‌باشد؛ به همین جهت در ادامه تمام صحبت ما درباره این مقدار خواهد بود.

برای اینکه از مقدار fixed استفاده کنیم باید جدول عرض مشخص و غیر از auto (مقدار پیشفرض عرض)‌ داشته باشد. معمولا این مقدار می تواند width: 100% باشد.

در مثال زیر تفاوت مقدار fixed و auto را مشاهده می کنید.

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

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

اما اگر همین حالت با table-layout: fixedرخ دهد. فضای باقیمانده بصورت مساوی بین ستون ها تقسیم خواهند شد. مانند:

 همانطور که گفته شد معیار تشخیص عرض ستون‌ها در حالتfixed ستون های ردیف اول جدول می‌باشد که بنظر منطقی هم می رسد که چنین باشد. اگر در ردیف دوم عرض ستون تعیین شود حتی با اینکه table-layout: fixed باشد، تاثیری در ساختار جدول، نخواهد گذاشت. 

نکته درباره سرعت پردازش

آنطور که در اسناد رسمی CSS در w3 بیان شده است الگوریتم‌های مربوط به table-layout: fixedبه شکل بهتر و سریع‌تری اجرا می‌شوند که چندان هم غیرقابل پیش‌بینی نیست چراکه در این حالت مرورگر دیگر نیازی به اسکن تمام محتوای ستون‌ها و کل جدول ندارد و راحت‌تر می تواند عرض ستون‌ها را تعیین کند.

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

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

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

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند