تزييف الحد الأدنى للعرض على عمود الجدول

حسن رأ ' <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 القيمة تحترم العرض - ولكن لدرجة أنها تلتهم مساحة العمود التي تحتاج إلى أكبر مساحة ... وهو أمر محظور بالنسبة لنا.

يمكن حل هذا بسهولة إذا تمكنا فقط من تعيين ملف min-width في العمود بدلاً من ملف width. بهذه الطريقة ، سيقول العمود ، "يمكنني أن أعطيكم جميعًا بعضًا من عرضي حتى نصل إلى هذه القيمة الدنيا." عندئذٍ يتجاوز الجدول الحاوية الخاصة به ويعطي المستخدم تمريرًا أفقيًا لعرض باقي الجدول. لكن لسوء الحظ، min-width على أعمدة الجدول لا تحترمها <col> جزء.

الحل

الحل هو تزييف ملف min-width وعلينا أن نكون مبدعين بعض الشيء للقيام بذلك.

يمكننا إضافة فارغة <col> كالعمود الثاني لدينا <colgroup> في HTML وتطبيق ملف 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 على Windows و VoiceOver على macOS ووجدت أنه تم الإعلان عن جميع الأعمدة الخمسة ، حتى لو كنا نستخدم أربعة منها فقط. وعندما يكون العمود الأول في موضع التركيز ، فإنه يعلن ، "العمود واحد إلى اثنين". ليست أنيقة تمامًا ولكنها أيضًا لن تسبب ضياع شخص ما. أتخيل أننا يمكن أن نرمي aria-hidden في العمود غير المستخدم ، ولكن تعرف أيضًا أن ARIA ليست بديلاً عن HTML الضعيف.

---

سوف أعترف ، هذا شعور قليل ، أم ، مبتذل. لكنها تعمل! اسمحوا لي أن أعرف إذا كان لديك نهج مختلف في التعليقات ... أو تعرف على أي ارتباك قد يجلبه هذا "الاختراق" لمستخدمينا.

• محتوى مدعوم من تحسين محركات البحث وتوزيع العلاقات العامة. تضخيم اليوم.
• بلاتوبلوكشين. Web3 Metaverse Intelligence. تضخيم المعرفة. الوصول هنا.
• المصدر https://css-tricks.com/faking-min-width-on-a-table-column/