الفرق بين المراجعتين لصفحة: «CSS/empty-cells»

مراجعة 08:27، 29 يوليو 2018

الخاصية empty-cells في CSS تُحدِّد كيف يجب أن يعرض المتصفح خلفية وإطار خلايا الجداول <table> التي ليس فيها محتوى ظاهر. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت الخاصية border-collapse مضبوطةً إلى separate.

بطاقة الخاصية

القيمة الابتدائية	`show`
تُطبَّق على	خلايا الجداول.
قابلة للوراثة	نعم
قابلة للحركة	لا
القيمة المحسوبة	كما حُدِّدَت.

/* كلمات محجوزة */ 
empty-cells: show;
empty-cells: hide;

/* القيم العامة */
empty-cells: inherit;
empty-cells: initial;
empty-cells: unset;

أمثلة

سنستخدم في المثال الآتي جدولين <table> فيهما خلايا ليس فيها محتوى، واستعملنا القيمة show (وهي القيمة الافتراضية) على أوّل جدول، والقيمة hide على الجدول الثاني:

<table class="show">
  <tr>
    <td></td>
    <td>2</td>
    <td></td>
  </tr>
  <tr>
    <td>4</td>
    <td></td>
    <td>6</td>
  </tr>
  <tr>
    <td></td>
    <td>8</td>
    <td></td>
  </tr>
</table>

<table class="hide">
  <tr>
    <td></td>
    <td>2</td>
    <td></td>
  </tr>
  <tr>
    <td>4</td>
    <td></td>
    <td>6</td>
  </tr>
  <tr>
    <td></td>
    <td>8</td>
    <td></td>
  </tr>
</table>

شيفرة CSS:

.show { empty-cells: show; }

.hide { empty-cells: hide; }

td {
  border: 1px solid gray;
  background-color: #f8f9fa;
  padding: 0.5rem;
}

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

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	8.0	4.0	1.2

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

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

`show`

سيُعرَض الإطار والخلفية في الخلايا الفارغة كما في غيرها.

`hide`

لن يُعرَض الإطار والخلفية في الخلايا الفارغة.

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

empty-cells: show | hide;

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

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

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:الخاصية <code>empty-cells</code>}}</noinclude>
-الخاصية <code>empty-cells</code> في CSS تُحدِّد كيف يجب أن يعرض المتصفح خلفية وإطار خلايا الجداول <code>[[HTML/table|<nowiki><table></nowiki>]]</code> التي ليس فيها محتوى ظاهر. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت الخاصية <code>[[CSS/border-collapse|border-collapse]]</code> مضبوطةً إلى <code>separate</code>.<syntaxhighlight lang="css">
+الخاصية <code>empty-cells</code> في CSS تُحدِّد كيف يجب أن يعرض المتصفح خلفية وإطار خلايا الجداول <code>[[HTML/table|<nowiki><table></nowiki>]]</code> التي ليس فيها محتوى ظاهر. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت الخاصية <code>[[CSS/border-collapse|border-collapse]]</code> مضبوطةً إلى <code>separate</code>.
-/* كلمات محجوزة */
-empty-cells: show;
-empty-cells: hide;
-/* القيم العامة */
+== بطاقة الخاصية ==
-empty-cells: inherit;
-empty-cells: initial;
-empty-cells: unset;
-</syntaxhighlight>
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 28: / سطر 21: @@
 |}
+<syntaxhighlight lang="css">
+/* كلمات محجوزة */
+empty-cells: show;
+empty-cells: hide;
+/* القيم العامة */
+empty-cells: inherit;
+empty-cells: initial;
+empty-cells: unset;
+</syntaxhighlight>
 == أمثلة ==
@@ سطر 96: / سطر 100: @@
 == البنية العامة ==
 الخاصية <code>empty-cells</code> تقبل إحدى الكلمتين المحجوزتين التاليتين.
-=== القيمة <code>show</code> ===
+=== <code>show</code> ===
 سيُعرَض الإطار والخلفية في الخلايا الفارغة كما في غيرها.
-=== القيمة <code>hide</code> ===
+===  <code>hide</code> ===
 لن يُعرَض الإطار والخلفية في الخلايا الفارغة.
 === البنية الرسمية ===