To fix the thead
of a table when scrolling, you can use the following approach. However, in WordPress, you need to ensure that your JavaScript code is properly enqueued and loaded on the page where the table is displayed. Here’s an example of how you can achieve this:
-
Enqueue the JavaScript: Add the following code to your theme’s
functions.php
file to enqueue the JavaScript file:مقالات ذات صلةphpfunction enqueue_custom_script() { wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0', true); } add_action('wp_enqueue_scripts', 'enqueue_custom_script');
-
Create a Custom JavaScript File: Create a new file named
custom-script.js
in your theme’sjs
directory with the following content:javascriptdocument.addEventListener('DOMContentLoaded', function () { var table = document.getElementById("tablepress-10"); table.addEventListener("scroll", function () { var translate = "translate(0," + this.scrollTop + "px)"; this.querySelector("thead").style.transform = translate; }); });
Make sure to replace
tablepress-10
with the correct ID of your table. -
Include the Custom JavaScript File: Include the JavaScript file in your theme’s footer by adding the following code in your theme’s footer file (
footer.php
):phpwp_footer();
Ensure that this is placed just before the closing
tag.
-
Verify the Table ID: Double-check that the ID (
tablepress-10
) matches the ID of your table. -
Check for Errors: Use your browser’s developer tools to check for any JavaScript errors that might be preventing the script from running.
-
Testing: Test the table scroll behavior after implementing these changes.
Remember to always make a backup of your theme files before making any changes.
المزيد من المعلومات
لتحقيق هذا، يمكنك استخدام تقنية CSS المعروفة باسم “تثبيت العناصر” (Sticky Positioning). هذه التقنية تُمكنك من تثبيت العناصر مثل thead
في مكانها أثناء التمرير. إليك كيفية تحقيق ذلك باستخدام CSS:
-
تعيين العنصر كثابت:
يمكنك تعيين الـthead
كعنصر ثابت باستخدام CSS. هذا يعني أنها ستظل موجودة في الجزء العلوي من الجدول أثناء التمرير. استخدم الشيفرة التالية في CSS:cssthead { position: sticky; top: 0; background-color: #f1f1f1; /* لون الخلفية للعنصر الثابت */ }
-
تحديد ارتفاع الـ
thead
:
لتحديد ارتفاعthead
بحيث لا يتم تغطية أجزاء أخرى من الجدول أثناء التمرير، يمكنك استخدامdisplay: block
لـtr
فيthead
وتعيين ارتفاع محدد لكل صف:cssthead tr { display: block; height: 40px; /* ارتفاع الصفوف */ }
-
تحديد ارتفاع الجدول:
يُفضل تحديد ارتفاع للجدول بحيث يكون هناك مساحة كافية فوق الـthead
الثابتة لتجنب تغطية أي محتوى أثناء التمرير. يمكنك استخدامmax-height
لتحديد ارتفاع الجدول:csstable { max-height: 400px; /* ارتفاع الجدول */ overflow-y: auto; /* إضافة شريط تمرير عمودي إذا كان الجدول أطول من الارتفاع المحدد */ }
-
تطبيق التغييرات:
قم بإضافة هذا الكود إلى ملف CSS الخاص بموقعك (مثلstyle.css
) واحفظ التغييرات. ستلاحظ أنthead
ستظل مثبتة في الأعلى أثناء التمرير.
تأكد من اختبار الموقع على متصفحات مختلفة لضمان أن التثبيت يعمل كما هو متوقع.