Border Collapse

این ویژگی مشخص می‌کنه که خطوط جدول (table borders) چطور نمایش داده بشن:

  • collapse → مرزهای جدول و سلول‌ها روی هم می‌افتن (یک خط واحد).

  • separate → مرزهای جدول و سلول‌ها جدا از هم نمایش داده می‌شن.

📑 کلاس‌های Tailwind

کلاسمقدار CSS
border-collapseborder-collapse: collapse;
border-separateborder-collapse: separate;

📌 مثال

<table class="table-auto border-collapse border border-gray-400 w-1/2">
  <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 border-gray-400 w-1/2 mt-6">
  <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>

🎯 تفاوت‌ها:

  • جدول اول (border-collapse) → مرزها روی هم افتادن، یک خط مشترک ساخته میشه.

  • جدول دوم (border-separate) → مرزهای جداگانه داره، بین خطوط فاصله هست.