Postبا اعمال position: sticky روی سربرگ جدول، می‌توان یک پیاده‌سازی زیبا و قابل‌فهم از هدر چسبان (Sticky Header) داشت.

با اعمال position: sticky روی سربرگ جدول، می‌توان یک پیاده‌سازی زیبا و قابل‌فهم از هدر چسبان (Sticky Header) داشت. اما یک مشکل وجود دارد: هنگام اسکرول، آخرین ردیف جدول زیر همین سربرگ مخفی می‌شود و ظاهر چندان خوبی ندارد؛ مخصوصاً زمانی که جدول فقط شامل متن ساده نیست و مواردی مانند شرایط مقایسه، تصاویر و موارد مشابه در آن وجود دارد. اما راه‌حل ساده است! کافی است به thead یک margin-bottom به اندازه‌ی ارتفاع کامل یک ردیف اضافه کنیم: margin-bottom: calc(1lh + 20px); توجه کنید که 1lh یک واحد اندازه‌گیری واقعی در CSS است که اجازه می‌دهد به مقدار line-height یا همان ارتفاع خط دسترسی داشته باشیم. البته جمع کردن مار با طوطی را که همیشه بلد بودیم! بله، شاید در نگاه اول چندان بدیهی نباشد، اما نتیجه این است که جدول حالا ظاهر فوق‌العاده‌ای پیدا می‌کند: 🔗https://codepen.io/alinaki/pen/JojeGMY?editors=0100 #️⃣#tip #css #code 👥@IR_javascript_group 🆔@IR_javascript`