استخدام "محاذاة النص: المركز" مع مجموعات CSS Colgroups: دليل استكشاف الأخطاء وإصلاحها

أحد التحديات الشائعة التي تتم مواجهتها عند تنسيق الجداول هو محاذاة النص أفقيًا . على الرغم من أنه يمكن تطبيق خاصية "محاذاة النص" على خلايا الجدول بشكل فردي، فقد يبدو أحيانًا أنه ليس لها أي تأثير عند تطبيقها على المجموعات المجمعة. فيما يلي شرح لسبب حدوث ذلك وحل للتغلب عليه.

حدود CSS لمجموعات Colgroups

على الرغم من غرضها المتمثل في تجميع الأعمدة وتنسيقها، فإن مجموعات Colgroups لها عدد محدود من مجموعة من خصائص CSS التي يمكنهم تطبيقها. لسوء الحظ، "محاذاة النص" ليست واحدة منها. وهذا يعني أنه حتى إذا قمت بتحديد "محاذاة النص: المركز" في مجموعة كول، فلن يؤثر ذلك على محاذاة النص داخل خلاياها.

حل بديل

لتحقيق توسيط النص داخل عمود في جدول، تحتاج إلى تطبيق خاصية "محاذاة النص: المركز" مباشرة على خلايا الجدول نفسها. ومع ذلك، فإن هذا يثير مشكلة أخرى: العمود الأول في الجدول لا يزال غير متمركز بسبب وجود العنصر "th" بمحاذاة اليسار.

لحل هذه المشكلة، قم بإضافة قواعد CSS التالية:

#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }

تعمل هذه القواعد على توسيط جميع خلايا الجدول باستثناء العمود الأول، الذي يظل محاذيًا لليسار، مما يضمن المحاذاة الصحيحة في جميع أنحاء الجدول.

HTML غير صالح

من الجدير بالذكر أن كود HTML الخاص بك غير صالح كما يتضح من عدم وجود عنصر "tr" داخل عنصر "thead". يجب تصحيح هذا لضمان بنية HTML المناسبة ودعم المتصفح.