Border Spacing

وقتی از border-separate استفاده می‌کنیم (مرزهای جدول جدا هستن)، می‌تونیم فاصله‌ی بین سلول‌های جدول رو با ویژگی border-spacing مشخص کنیم.

نکته: اگر border-collapse باشه، border-spacing هیچ اثری نداره.

📑 کلاس‌های Tailwind

Tailwind برای کنترل این فاصله، کلاس‌های آماده داره:

کلاسمقدار CSS
border-spacing-0border-spacing: 0;
border-spacing-1border-spacing: 0.25rem; (۴px)
border-spacing-2border-spacing: 0.5rem; (۸px)
border-spacing-4border-spacing: 1rem; (۱۶px)
border-spacing-8border-spacing: 2rem; (۳۲px)
border-spacing-x-*فاصله افقی بین ستون‌ها
border-spacing-y-*فاصله عمودی بین ردیف‌ها

📌 مثال

<table class="table-auto border-separate border-spacing-4 border border-gray-400">
  <tr>
    <td class="border border-gray-500 p-2">سلول ۱</td>
    <td class="border border-gray-500 p-2">سلول ۲</td>
  </tr>
  <tr>
    <td class="border border-gray-500 p-2">سلول ۳</td>
    <td class="border border-gray-500 p-2">سلول ۴</td>
  </tr>
</table>

<!-- فقط فاصله افقی -->
<table class="table-auto border-separate border-spacing-x-8 border border-gray-400 mt-6">
  <tr>
    <td class="border border-gray-500 p-2">سلول A</td>
    <td class="border border-gray-500 p-2">سلول B</td>
  </tr>
</table>

<!-- فقط فاصله عمودی -->
<table class="table-auto border-separate border-spacing-y-8 border border-gray-400 mt-6">
  <tr>
    <td class="border border-gray-500 p-2">سلول X</td>
  </tr>
  <tr>
    <td class="border border-gray-500 p-2">سلول Y</td>
  </tr>
</table>

🎯 نکات مهم

  • همیشه باید border-separate ست بشه تا border-spacing اثر کنه.

  • می‌تونی ترکیب کنی: مثلا border-spacing-x-4 border-spacing-y-8.