جعل حداقل عرض در ستون جدول

خوب <table> تگ معنایی ترین HTML برای نمایش داده های جدولی است. اما کنترل نحوه ارائه جدول برای من بسیار سخت است، به ویژه عرض ستون ها در یک محیط پویا که ممکن است ندانید چه مقدار محتوا به هر سلول جدول وارد می شود. در برخی موارد، یک ستون فوق العاده عریض است در حالی که سایر ستون ها خرد شده اند. در موارد دیگر، عرض‌های مساوی دریافت می‌کنیم، اما به قیمت ستونی که محتوای بیشتری دارد و به فضای بیشتری نیاز دارد.

اما من یک راه‌حل با ترفندهای CSS پیدا کردم که به آسان‌تر کردن کارها کمک می‌کند. این چیزی است که می خواهم در این پست به شما نشان دهم.

مشکل

ابتدا باید بدانیم که چیدمان چگونه توسط مرورگر مدیریت می شود. ما ... را داریم table-layout ویژگی در CSS برای تعریف اینکه چگونه یک جدول باید عرض را برای هر ستون جدول توزیع کند. یکی از دو مقدار را می گیرد:

• auto (به طور پیش فرض)
• fixed

اجازه دهید با یک جدول بدون تعریف هیچ عرضی در ستون های آن شروع کنیم. به عبارت دیگر، ما به مرورگر اجازه می‌دهیم تا با اعمال کردن به هر ستون تصمیم بگیرد که چقدر عرض بدهد table-layout: auto روی آن در CSS همانطور که متوجه خواهید شد، مرورگر بهترین کار خود را با الگوریتمی که دارد انجام می دهد تا تمام عرض موجود را بین هر ستون تقسیم کند.

اگر طرح جدول خودکار را با آن عوض کنیم table-layout: fixed، سپس مرورگر فقط فضای کامل موجود را بر تعداد کل ستون ها تقسیم می کند، سپس آن مقدار را به عنوان عرض برای هر ستون اعمال می کند:

اما اگر بخواهیم عرض ستون های خود را کنترل کنیم چه؟ ما ... را داریم <colgroup> عنصر برای کمک! متشکل از فردی است <col> عناصری که می توانیم برای تعیین عرض دقیق مورد نیاز برای هر ستون استفاده کنیم. بیایید ببینیم که چگونه با آن کار می کند table-layout: auto:

من سبک ها را به خاطر تصویرسازی خط کشیده ام.

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

چگونه <colgroup> کار با table-layout: fixed. بیایید دریابیم:

این اصلاً خوب به نظر نمی رسد. ما نیاز داریم که ستونی با یک دسته محتوا در آن کمی خم شود و در عین حال یک عرض ثابت برای بقیه ستون‌ها حفظ شود. یک ثابت table-layout ارزش به عرض احترام می گذارد - اما به اندازه ای که فضای ستونی را که به بیشترین فضا نیاز دارد می خورد... که برای ما ممنوع است.

اگر فقط بتوانیم a را تنظیم کنیم، این به راحتی حل می شود min-width روی ستون به جای a width. به این ترتیب، ستون می‌گوید: «می‌توانم مقداری از عرضم را به همه شما بدهم تا زمانی که به این مقدار حداقل برسیم.» سپس جدول به سادگی ظرف خود را سرریز می‌کند و به کاربر یک اسکرول افقی می‌دهد تا بقیه جدول را نمایش دهد. اما متاسفانه، min-width ستون های جدول توسط <col> عنصر

راه حل

راه حل جعل الف است min-width و برای انجام آن باید کمی خلاق باشیم.

می توانیم یک خالی اضافه کنیم <col> به عنوان ستون دوم برای ما <colgroup> در HTML و اعمال a colspan ویژگی ستون اول به طوری که ستون اول فضای هر دو ستون را اشغال کند:

<table> <colgroup> <col class="col-200" /> <col /> <col class="col-input" /> <col class="col-date" /> <col class="col-edit" /> </colgroup> <thead> <tr> <th colspan="2">Project name</th> <th>Amount</th> <th>Date</th> <th>Edit</th> </tr> </thead> <!-- etc. -->
</table>

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

ترفند این است که رابطه بین اولی <col> و ثانیه خالی <col>. اگر عرضی را به اولی اعمال کنیم <col> (این است 200px در قطعه بالا)، سپس ستون دوم زمانی که طرح جدول ثابت فضای موجود را برای توزیع به ستون ها تقسیم می کند، از بین می رود. اما عرض ستون اول (200px) محترم است و سر جای خود باقی می ماند.

وجود دارد! ما تقلبی داریم min-width روی یک سلول جدول قرار دهید. اولین سلول با تغییر فضای موجود خم می شود و جدول برای پیمایش افقی سرریز می شود همانطور که ما امیدوار بودیم.

(کمی اضافه کردم موقعیت چسبنده به ستون اول آنجا.)

دسترسی

بیایید دسترسی را در اینجا کاملاً فراموش نکنیم. من جدول را از طریق NVDA در ویندوز و VoiceOver در macOS اجرا کردم و متوجه شدم که هر پنج ستون اعلام شده است، حتی اگر فقط از چهار ستون استفاده کنیم. و هنگامی که ستون اول در فوکوس است، "ستون یک تا دو" را اعلام می کند. کاملاً شیک نیست، اما باعث نمی شود کسی گم شود. من تصور می کنم ما می توانیم پرتاب کنیم aria-hidden ویژگی در ستون استفاده نشده، اما همچنین بدانید ARIA جایگزینی برای HTML ضعیف نیست.

---

من اعتراف می کنم، این کمی احساس می کنم، اوم، هک است. اما کار می کند! اگر رویکرد متفاوتی در نظرات دارید به من اطلاع دهید... یا از هر گونه سردرگمی که این "هک" ممکن است برای کاربران ما ایجاد کند، اطلاع دارید.

• محتوای مبتنی بر SEO و توزیع روابط عمومی. امروز تقویت شوید.
• پلاتوبلاک چین. Web3 Metaverse Intelligence. دانش تقویت شده دسترسی به اینجا.
• منبع: https://css-tricks.com/faking-min-width-on-a-table-column/