CSS/table-layout

الخاصية table-layout في CSS تُحدِّد الخوارزمية التي تُستخدم لضبط تخطيط خلايا وأسطر وأعمدة الجداول <table>.

/* كلمات محجوزة */ 
table-layout: auto;
table-layout: fixed;

/* القيم المحجوزة */
table-layout: inherit;
table-layout: initial;
table-layout: unset;

القيمة الابتدائية	auto
تُطبَّق على	عناصر table و inline-table.
قابلة للوراثة	نعم
قابلة للحركة	لا
القيمة المحسوبة	كما حُدِّدَت.

أمثلة

القيمة fixed

التخطيط الأفقي للجدول لن يعتمد على محتوى الخلايا، وإنما على عرض الجدول، وعرض الأعمدة، والإطار border والتباعد بين الخلايا border-spacing.

يمكن تحديد عرض الجدول باستخدام الخاصية width، وإذا لم تُحدِّد العرض فسيستخدم المتصفح التخطيط auto تلقائيًا.

إذا لم تُحدِّد عرض أي عمود من أعمدة الجدول، فسيكون عرضها متساويًا، بغض النظر عن المحتوى الموجود فيها:

<div class="container">
  <table>
    <caption><small>عرض الجدول مضبوط إلى 814px، وعرض الأعمدة <strong>ليس</strong> مُحدَّدًا.</small></caption>
    <tr>
      <td>محتويات أوّل خلية في أوّل عمود</td>
      <td>محتوى ثاني خلية</td>
    </tr>
    <tr>
      <td>محتوى ثالث خلية</td>
      <td>رابع خلية</td>
    </tr>
  </table>
</div>

شيفرة CSS:

.container {
  margin: 40px auto;
  width: 800px;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: left;
}

table {
  table-layout: fixed;
  width: 814px;
  background-color: white;
}

caption {
  caption-side: bottom;
  font-style: italic;
}

إذا حددت عرض الأعمدة فسيستخدم ذاك العرض، وإذا كان مجموع عرض الأعمدة (مع عرض التباعد بين الخلايا والإطار) أكبر من عرض الجدول (المضبوط عبر الخاصية width) فسيزداد عرض الجدول؛ أما إذا كان الجدول أعرض من الأعمدة، فستوزَّع المسافة الزائدة على الأعمدة.

<div class="container">
  <table>
    <caption><small>عرض الجدول مضبوطٌ إلى 814px، ومجموع عرض الأعمدة أقل من عرض الجدول، لذا ستوزع المسافة الباقية على الأعمدة بالتساوي.</small></caption>
    <tr>
      <td class="col-1">عرض هذا العمود مضبوطٌ إلى 200px.</td>
      <td class="col-2">عرض هذا العمود مضبوطٌ إلى 300px.</td>
    </tr>
    <tr>
      <td>محتوى ثالث خلية</td>
      <td>رابع خلية</td>
    </tr>
  </table>
</div>

<div class="container container-2">
  <table>
    <caption><small>عرض الجدول مضبوطٌ إلى 814px، ومجموع عرض الأعمدة أكبر من عرض الجدول، لذا سيزداد عرض الجدول.</small></caption>
    <tr>
      <td class="col-1">عرض هذا العمود مضبوطٌ إلى 600px.</td>
      <td class="col-2">عرض هذا العمود مضبوطٌ إلى 300px.</td>
    </tr>
    <tr>
      <td>محتوى ثالث خلية</td>
      <td>رابع خلية</td>
    </tr>
  </table>
</div>

شيفرة CSS:

.container {
  margin: 40px auto;
  width: 800px;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: left;
}

table {
  table-layout: fixed;
  width: 814px;
  background-color: white;
}

caption {
  caption-side: bottom;
  font-style: italic;
}

.col-1 {
  width: 200px;
}

.col-2 {
  width: 300px;
}

.container-2 .col-1 {
  width: 600px;
}

.container-2 .col-2 {
  width: 300px;
}

القيمة auto

سيعطى عرض الجدول حسب عرض الأعمدة المكوِّنة له، ويُحدَّد عرض العمود حسب أكثر محتوى عرضًا فيه ما لم يُحدَّد العرض باستخدام الخاصية width.

عندما لا يكون عرض الجدول محددًا، فسيساوي مجموع عرض الأعمدة الموجودة فيه، والتي يكون عرض كل واحدٍ منها يعتمد على محتوى الخلايا الموجودة فيها:

<div class="container">
  <table>
    <caption><small> عرض الجدول <strong>ليس</strong> محددًا، وعرض الأعمدة <strong>ليس</strong> مُحدَّدًا.</small></caption>
    <tr>
      <td>محتويات أوّل خلية في أوّل عمود</td>
      <td>محتوى ثاني خلية</td>
    </tr>
    <tr>
      <td>محتوى ثالث خلية</td>
      <td>رابع خلية</td>
    </tr>
  </table>
</div>

شيفرة CSS:

.container {
  margin: 40px auto;
  width: 800px;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: left;
}

table {
  background-color: white;
  table-layout: auto;
}

caption {
  caption-side: bottom;
  font-style: italic;
}

يمكنك تحديد عرض للجدول، وإذا لم يكن هنالك عرضٌ محدد للأعمدة فسيكون عرضها متناسبًا مع محتوى الخلايا التي تتبع لها:

<div class="container">
  <table>
    <caption><small> عرض الجدول هو 814px، وعرض الأعمدة <strong>ليس</strong> مُحدَّدًا.</small></caption>
    <tr>
      <td>محتويات أوّل خلية في أوّل عمود</td>
      <td>محتوى ثاني خلية</td>
    </tr>
    <tr>
      <td>محتوى ثالث خلية</td>
      <td>رابع خلية</td>
    </tr>
  </table>
</div>

شيفرة CSS:

.container {
  margin: 40px auto;
  width: 800px;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: left;
}

table {
  background-color: white;
  table-layout: auto;
  width: 814px;
}

caption {
  caption-side: bottom;
  font-style: italic;
}

أما إذا حددت عرض الأعمدة لكن لم تُحدِّد عرض الجدول، فسيكون عرض الجدول مساويًا لمجموع عرض الأعمدة المكونة له:

<div class="container">
  <table>
    <caption><small>عرض الجدول غير محدد، وعرض الأعمدة محدد.</small></caption>
    <tr>
      <td class="col-1">عرض هذا العمود مضبوطٌ إلى 300px.</td>
      <td class="col-2">عرض هذا العمود مضبوطٌ إلى 200px.</td>
    </tr>
    <tr>
      <td>محتوى ثالث خلية</td>
      <td>رابع خلية</td>
    </tr>
  </table>
</div>

شيفرة CSS:

.container {
  margin: 40px auto;
  width: 800px;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: left;
}

table {
  background-color: white;
  table-layout: auto;
}

caption {
  caption-side: bottom;
  font-style: italic;
}

.col-1 {
  width: 300px;
}

.col-2 {
  width: 200px;
}

إذا كان عرض الجدول وأعمدته مضبوطًا، وكان مجموع عرض الأعمدة أقل من عرض الجدول، فستوزَّع المسافة الباقية على الأعمدة بالتساوي:

<div class="container">
  <table>
    <caption><small>عرض الجدول هو 814px، وعرض الأعمدة محدد ومجموعها أقل من عرض الجدول.</small></caption>
    <tr>
      <td class="col-1">عرض هذا العمود مضبوطٌ إلى 300px.</td>
      <td class="col-2">عرض هذا العمود مضبوطٌ إلى 200px.</td>
    </tr>
    <tr>
      <td>محتوى ثالث خلية</td>
      <td>رابع خلية</td>
    </tr>
  </table>
</div>

شيفرة CSS:

.container {
  margin: 40px auto;
  width: 800px;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: left;
}

table {
  background-color: white;
  table-layout: auto;
  width: 814px;
}

caption {
  caption-side: bottom;
  font-style: italic;
}

.col-1 {
  width: 300px;
}

.col-2 {
  width: 200px;
}

إذا كان عرض الأعمدة أكبر من عرض الجدول، فلن يتوسع الجدول:

<div class="container">
  <table>
    <caption><small>عرض الجدول هو 814px، وعرض الأعمدة محدد ومجموعها أكبر من عرض الجدول.</small></caption>
    <tr>
      <td class="col-1">عرض هذا العمود مضبوطٌ إلى 900px.</td>
      <td class="col-2">عرض هذا العمود مضبوطٌ إلى 200px.</td>
    </tr>
    <tr>
      <td>محتوى ثالث خلية</td>
      <td>رابع خلية</td>
    </tr>
  </table>
</div>

شيفرة CSS:

.container {
  margin: 40px auto;
  width: 800px;
}

table,
td,
th {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: left;
}

table {
  background-color: white;
  table-layout: auto;
  width: 814px;
}

caption {
  caption-side: bottom;
  font-style: italic;
}

.col-1 {
  width: 900px;
}

.col-2 {
  width: 200px;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	14.0	1.0	5.0	7.0	1.0

البنية العامة

الخاصية table-layout تقبل إحدى الكلمتين المحجوزتين التاليتين.

القيمة auto

افتراضيًا، تستخدم أغلبية المتصفحات خوارزمية تلقائية لعرض الجداول، إذ يُعدَّل عرض الجدول والخلايا لكي تتسع لمحتوياتها.

القيمة fixed

سيُحدَّد عرض الجدول وعرض الأعمدة حسب قيمة عرض العنصرين <table> و <col> أو حسب عرض أوّل سطر من الخلايا، ولن يكون للخلايا الموجودة في الأسطر التي تلي أوّل سطر أيّ أثر.

إذا استعملنا القيمة fixed فسيتمكن المتصفح من عرض كامل الجدول بعد تنزيل وتحليل بيانات أوّل سطر، وهذا يؤدي إلى تسريع زمن إظهار الجدول مقارنةً بالطريقة التلقائية، التي تحتاج إلى تنزيل كامل الجدول وتحليله أولًا قبل عرضه.

المشكلة مع هذه القيمة هي أنَّ محتوى الخلايا الموجودة في الأسطر التي تلي أوّل سطر قد لا تتسع في عرض العمود، لكن يمكن استخدام الخاصية overflow للتحكم بسلوكها، لاحظ أنَّ المحتوى لن يخرج عن الخلية إلا إذا كان عرض الجدول محددًا.

البنية الرسمية

table-layout: auto | fixed;

مصادر ومواصفات

• مواصفة ‎CSS Level 2 (Revision 1)‎.