ویژگی empty-cells در CSS

empty-cells Property

ویژگی empty-cells در CSS مشخص می کند سلول هایی از جدول که از نظر محتوایی خالی هستند، نشان داده شوند یا خیر.

نحوه نوشتار

empty-cells: show;
empty-cells: hide;

نکته: این ویژگی زمانی کارایی دارد که مقدار ویژگی border-collapse برابر با separate باشد.

مقادیر

show​

حاشیه ها و پس زمینه بطور معمول نمایش داده می شوند.

hide​

حاشیه ها و پس زمینه بطور معمول نمایش داده نمی شوند.

در مثال زیر نحوه عملکرد این ویژه گی را میبینیم:

html

 <table class="show">
    <caption>
        <em>سلولهای خالی نمایش داده می شوند.</em>
    </caption>
    <thead>
        <tr>
          <th>Header content 1</th>
          <th></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
          <td>Footer content 1</td>
          <td>Footer content 2</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
          <td></td>
          <td>Body content 2</td>
        </tr>
    </tbody>
</table>

<table class="hide">
    <caption>
        <em>سلولهای خالی نمایش داده نمی شوند.</em>
    </caption>
    <thead>
        <tr>
          <th>Header content 1</th>
          <th></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
          <td>Footer content 1</td>
          <td>Footer content 2</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
          <td></td>
          <td>Body content 2</td>
        </tr>
    </tbody>
</table>

css

body {
   color: #555;
   font-size: 1.1em;
   font-family: "Segoe UI";
   direction: rtl;
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
}
.container {
   margin: 40px auto;
   max-width: 900px;
}
table {
   margin: 2em auto;
}
table,      
td,
th {
    padding: 0.7em;
    border: 1px solid #aaa;
}
.show {
    empty-cells: shows;
}
.hide {
    empty-cells: hide;
}
caption {
    padding: 0.5em;
    color: #0099cc;
}
.separate {
    border-collapse: separate;
}
.collapsed {
     border-collapse: collapse;
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی پشتیبانی می کنند.