ویژگی table-layout مشخص می‌کنه مرورگر چطور عرض ستون‌های جدول رو محاسبه کنه:

• auto (پیش‌فرض):
  مرورگر بر اساس محتوای سلول‌ها عرض ستون‌ها رو تعیین می‌کنه.

• fixed:
  عرض ستون‌ها بر اساس عرض اولین ردیف یا مقدار width داده‌شده مشخص میشه و محتوا دیگه عرض رو تغییر نمی‌ده. این حالت باعث رندر سریع‌تر جدول میشه.

📑 کلاس‌های Tailwind برای Table Layout

📌 مثال

<!-- حالت پیش‌فرض (auto) -->
<table class="table-auto border border-gray-400 w-full">
  <thead>
    <tr>
      <th class="border px-4 py-2">ستون ۱</th>
      <th class="border px-4 py-2">ستون ۲</th>
      <th class="border px-4 py-2">ستون ۳</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">این متن کوتاهه</td>
      <td class="border px-4 py-2">این یه متن خیلی طولانی‌تره که باعث میشه ستون گسترش پیدا کنه</td>
      <td class="border px-4 py-2">متن معمولی</td>
    </tr>
  </tbody>
</table>

<!-- حالت fixed -->
<table class="table-fixed border border-gray-400 w-full mt-6">
  <thead>
    <tr>
      <th class="border px-4 py-2 w-1/4">ستون ۱</th>
      <th class="border px-4 py-2 w-1/2">ستون ۲</th>
      <th class="border px-4 py-2 w-1/4">ستون ۳</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border px-4 py-2">این متن کوتاهه</td>
      <td class="border px-4 py-2">این یه متن خیلی طولانی‌تره ولی ستون عرضش ثابته و متن می‌شکنه</td>
      <td class="border px-4 py-2">متن معمولی</td>
    </tr>
  </tbody>
</table>

🎯 نکات مهم

• table-auto مناسب وقتی هست که عرض ستون‌ها باید بر اساس محتوا تنظیم بشه.

• table-fixed مناسب برای زمانی هست که می‌خوای جدول عرض ثابت و یکدست داشته باشه.

• بهتره همراه w-full استفاده بشه تا جدول کل عرض والد رو بگیره.

• تو حالت fixed، متن طولانی داخل سلول می‌شکنه (wrap میشه).