خاصية تخطيط الجدول
آخر تحديث: 2026-09-13
table-layout خاصية تخطيط الجدول
تحدد table-layout الخوارزمية المستخدمة لحساب عرض أعمدة الجدول. والافتراضي auto يحدد عرض الأعمدة بناءً على المحتوى، فتتسع الأعمدة لتناسب المحتوى الكبير. أما fixed فتحدد عرض الأعمدة من الصف الأول أو من عرض صريح مع تجاهل المحتوى، وتُعرض أسرع — وهي مناسبة للجداول ذات البيانات الضخمة.
| الفئة | |
|---|---|
| القيمة الأولية | auto |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS2 |
| الحالة | قياسي |
📝 التركيب
table-layout: auto | fixed;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
auto | fixed | كلمة مفتاحية | خوارزمية تخطيط الجدول |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| table-layout | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： مع table-layout: fixed و width: 100% وتعيين width على th في الصف الأول، تُنتج بسرعة أعمدة متساوية أو موزعة بالتناسب.
❓ الأسئلة الشائعة
Qما الفرق بين table-layout: auto و fixed؟
Aauto (الافتراضي): يتنقل المتصفح في كل خلية ويحسب عرض الأعمدة من المحتوى، فالمحتوى العريض يمدّ الأعمدة وقد يكسر الحاوية، وأول عرض يكون أبطأ. أما fixed: فعرض الأعمدة يأتي من الصف الأول أو من عرض صريح مع تجاهل المحتوى، فتُعرض أسرع؛ ويمكن معالجة المحتوى الزائد عبر overflow أو text-overflow.
Qمتى يجب أن أستخدم table-layout: fixed؟
Aاستخدم fixed لمجموعات البيانات الكبيرة، أو لعرض أعمدة ثابتة، أو عند الحاجة إلى قطع النص عبر text-overflow: ellipsis. فهي تترك الصف الأول يحدد العرض وتُعرض أسرع، ولا يمكن للمحتوى الطويل أن يكسر الجدول. وتستخدم الجداول المتجاوبة أيضًا fixed مع عرض بالنسب المئوية لأعمدة موزعة بالتساوي.
Qلماذا لا تُطبَّق إعدادات العرض مع table-layout: fixed؟
Aفي وضع fixed، يأتي العرض من الصف الأول من الجدول (عادةً th)؛ ويُتجاهل العرض المضبوط على td في الصفوف اللاحقة. وللتحكم في العرض، اضبطه على th في الصف الأول أو استخدم <colgroup> مع <col>. فإذا لم يضبط الصف الأول أي عرض، تُقسَّم الأعمدة بالتساوي حسب العرض الكلي للجدول. وهذا أكبر فرق سلوكي عن auto.
Qهل يمكن لـ table-layout: fixed حل مشكلة محتوى يفيض عن الجدول؟
Aنعم. في وضع auto، يمد المحتوى الطويل الأعمدة وقد يكسر الحاوية؛ أما في وضع fixed فالعرض يأتي من الصف الأول، ويبدأ المحتوى الزائد بالالتفاف افتراضيًا أو يفيض. وبالاشتراك مع white-space: nowrap و overflow: hidden و text-overflow: ellipsis، تحصل على قطع ذو سطر واحد مع علامة حذف — وهي المجموعة القياسية للنصوص الطويلة جدًا ولفيضان الجداول.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
