معرفی خاصیت empty-cells
در CSS، یکی از خاصیت‌های کمتر شناخته شده ولی کاربردی، empty-cells است. این خاصیت برای کنترل نمایش یا عدم نمایش سلول‌های خالی در جدول‌ها استفاده می‌شود. گاهاً در طراحی جداول بزرگ و پیچیده، سلول‌هایی وجود دارند که ممکن است خالی باقی بمانند. با استفاده از خاصیت empty-cells می‌توانید تعیین کنید آیا این سلول‌ها نمایش داده شوند یا خیر.
نحوه استفاده از empty-cells
این خاصیت با دو مقدار show و hide همراه است. مقدار پیش‌فرض show است که باعث می‌شود سلول‌های خالی نمایش داده شوند. در مقابل، مقدار hide باعث می‌شود که این سلول‌ها پنهان شوند و تاثیر ظاهری خاصی بر روی طراحی جدول نداشته باشند. با این حال، عملکرد و تاثیر این خاصیت بیشتر توسط مرورگرهای مدرن پشتیبانی می‌شود و ممکن است در مرورگرهای قدیمی‌تر به خوبی کاری نکند.
نمونه کد
حال بیایید نگاهی بیندازیم به یک نمونه کد ساده که چگونه از خاصیت empty-cells استفاده کنیم.
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid black;
height: 50px;
}
.hide-empty-cells {
empty-cells: hide;
}
</style>
<table class="hide-empty-cells">
<tr>
<td>Cell 1</td>
<td></td>
</tr>
<tr>
<td></td>
<td>Cell 4</td>
</tr>
</table>
توضیحات خط به خط کد
<style>این تگ استایل‌ها و استایل‌های سفارشی CSS را درون خود نگه می‌دارد.
table { ... }با استفاده از این استایل، استایل‌های عمومی جدول نظیر مرزبندی و اندازه تنظیم می‌شود.
td { ... }در اینجا تنظیمات مربوط به سلول‌های جدول نظیر مرز و ارتفاع اعمال می‌شود.
.hide-empty-cells { empty-cells: hide; }در این خط، تعریف می‌کنیم که سلول‌های خالی برای کلاس hide-empty-cells پنهان شوند.
<table class="hide-empty-cells">ایجاد یک جدول با کلاس hide-empty-cells که باعث پنهان‌سازی سلول‌های خالی می‌شود.
<tr>...</tr>یک ردیف جدید در جدول، که شامل دو سلول است، یکی پر و دیگری خالی.