"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > كيفية إنشاء جدول HTML قابل للتمرير برؤوس ثابتة؟

كيفية إنشاء جدول HTML قابل للتمرير برؤوس ثابتة؟

نشر في 2025-02-15
تصفح:229

How to Create a Scrollable HTML Table with Fixed Headers?

. ومع ذلك ، يمكن أن يكون إيجاد حل فعال أمرًا صعبًا. سيستكشف هذا الدليل الحل لهذه المشكلة ، ويوجهك من خلال التنفيذ.

الحل

التقنيات. الحل الشائع هو توظيف تقنية تُعرف باسم التمرير المزدوج. يتضمن ذلك إنشاء جدولين متداخلين: جدول خارجي يحتوي على رأس ثابت وجدول داخلي قابل للتمرير لجسم الجدول.

للجداول: / * الجدول الخارجي (رأس ثابت) */ #table table { العرض: 100 ٪ ؛ الارتفاع: 100px ؛ / * اضبط ارتفاعًا ثابتًا للرأس */ الفائض: مخفي. } / * الجدول الداخلي (الجسم القابل للتمرير) */ #الجدول الداخلي { الارتفاع: حساب (100 ٪ - 100px) ؛ / * احسب الارتفاع بناءً على ارتفاع الجدول الخارجي */ فائض y: التمرير ؛ }

إعداد javaScript

') ؛ const inflable = document.getElementById ('table table') ؛ // احسب ارتفاع الجدول الداخلي بناءً على ارتفاع الجدول الخارجي infliable.style.height = `$ {outertable.clientheight - 100} px` ؛

&&&]

هذا الحل يجمد بشكل فعال رأس الجدول مع السماح لجسم الجدول بالتمرير بسلاسة. من خلال تنفيذ هذه التقنيات ، يمكنك إنشاء جداول مستجيبة وتفاعلية تلبي متطلباتك المحددة.

أحدث البرنامج التعليمي أكثر>

تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

Copyright© 2022 湘ICP备2022001581号-3