چرا رنگ ردیف‌های راه‌راه بیش از ستون‌هاست؟

يكي از مشكلات رايج هنگام استفاده از استایل CSS برای جدول‌ها، این است که ممکن است رنگ‌ آمیزی ردیف‌های راه‌راه بیش از اندازه‌ی ستون‌هایی که مقداری دارند گسترش یابد. این اتفاق معمولاً زمانی می‌افتد که جدول به‌درستی ساختاربندی یا استایل‌دهی نشده است.

ابتدا، بیایید با هم به این نگاه کنیم که چرا این اتفاق ممکن است بیفتد. یک دلیل رایج می‌تواند این باشد که ستون‌ها اندازه یا محدوده‌ی تعریف‌شده‌ای ندارند و CSS جدول به‌صورت خودکار محاسبه شده و یا از پیش‌فرض‌های مرورگر استفاده می‌کند که ممکن است منجر به این مشکل شوند.

برای رفع این مشکل، می‌توانیم مقادیری مشخص برای عرض ستون‌های جدول تعیین کنیم و همچنین از تکنیک‌های مختلف CSS برای محدود کردن گسترش رنگ‌ آمیزی استفاده کنیم. مثلاً با استفاده از نمایشگرهای مدرن و واحدهای اندازه‌گیری مانند فراواحدها (em, rem) و همچنین واحدهای نسبی (مانند درصد) می‌توان کنترل بهتری بر روی اندازه جدول‌ها داشت.

بیایید یک نمونه کد ببینیم که در آن از یک جدول ساده با رنگ‌ آمیزی راه‌راه استفاده شده است و مشکلات مربوط به ستون‌ها رفع شده است:

ابتدا، با یک عنوان ساده در ذهن استایل‌دهی جدول بسازیم:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  tr:hover {
    background-color: #ddd;
  }
</style>

<table>
  <thead>
    <tr>
      <th>نام</th>
      <th>سن</th>
      <th>شغل</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>علی</td>
      <td>۲۵</td>
      <td>برنامه‌نویس</td>
    </tr>
    <tr>
      <td>سارا</td>
      <td>۲۸</td>
      <td>طراح</td>
    </tr>
  </tbody>
</table>

حال می‌خواهیم به‌طور خط به خط کد را توضیح دهیم:

table
عناصر جدول به صورت پیش‌فرض به‌صورت گسترشی ظاهر می‌شوند، اما استفاده از border-collapse: collapse; باعث می‌شود که خطوط بین سلول‌ها کم رنگ‌تر شده و یکپارچه‌تر دیده شوند.

th, td
این تگ‌ها برای استایل‌دهی محتویات سلول‌ها استفاده می‌شود و با اعمال border: 1px solid #ddd; و padding: 8px; ظاهری مرتب‌تر به جدول می‌دهند.

tr:nth-child(even)
این انتخابگر برای رنگ‌ آمیزی مجدد راه‌راه داده‌های ردیف‌ها استفاده می‌شود و می‌توانید رنگ این راه‌راه‌ها را با background-color: #f2f2f2; تغییر دهید.

tr:hover
این انتخابگر به کاربر بازخورد بصری می‌دهد وقتی نشانگر موس روی یک ردیف قرار می‌گیرد و با اضافه کردن background-color: #ddd; یک رنگ خاص به آن ردیف اختصاص می‌دهد.