TableorTer 2.0 Plugin - تمكين تمرير الجدول

Question

أنا أستخدم المكون الإضافي Tableorter ويعمل بشكل رائع. حاليا ، أحقق التمرير الجدول باستخدام غلاف DIV. هل من الممكن جعل الجدول تمرير ، والحفاظ على الرؤوس مرئية أثناء التمرير وعدم استخدام أي divs؟

Answer 1

جرب هذه CSS ، وضبط الارتفاع ليناسب:

tbody{height: 4em; overflow: scroll}

مثال: http://jsbin.com/ofice

Answer 2

كما هو موضح أعلاه (أو هذا المثال) ، أن تكون متصفحًا (وأي doctype) tbody و thead العلامات تحتاج CSS عرض كما كتلة. إذا كنت بحاجة إلى إظهار شريط التمرير خارج tbody, أو تحتاج إلى استخدام المتصفحات غير القياسية ، فأنت بحاجة إلى حل أكثر تعقيدًا:

لعرض شريط التمرير في الخارج أو الاستخدام مع المتصفحات القديمة

الحل هو تقسيم الجدول thead و tbody في جدولين متميزين ، إذن ، استخدم أ div للتحكم في التمرير (الفائض y) لجدول (محتوى tbody) الثاني.

المقايضات:

• تحتاج إلى الانقسام إلى جدولين (يمكن لـ jQuery القيام به بواسطة Table Second Table والتعامل مع thead) ؛
• تحتاج إلى محاذاة على حد سواء إضافة عرض.

أسئلة ذات صلة:

• هل هناك غرض مباشر لـ HTML's tbody؟
• u003Ctable style=";text-align:right;direction:rtl">: كيف يمكنu003Cthead> يتم عرضها أثناء التمرير من خلالu003Ctbody> في HTML/CSS
• Doctype صارم يفرض الحد الأدنى لصف صف الجدول في FF/Chrome

---

أمثلة

• الجدول المنقسم (باليد): http://jsfiddle.net/krauss/b9nsu/1/
• jQuery نسخ thread في جدول منفصل: http://jsfiddle.net/krauss/ylgg6/1/

Answer 3

ملاحظة: أنا أجيب على هذا المنشور القديم للتحديث حول تقدم المساعد الجديلة jQuery.

يمكنك استخدام شوكة من هذا البرنامج المساعد بواسطة mottie (http://mottie.github.io/tablesorter/docs/index.html)

ثم فقط على DOM ، قم بتشغيل هذا البرنامج النصي:

 $('table').tablesorter({
        widgets        : ['zebra', 'columns', 'stickyHeaders']
    });

كل ما عليك تضمينه لهذا العمل:

1) jquery.tablesorter.js

2) jquery.tablesorter.widgets.js

3) أي من سمات CSS ، على سبيل المثال: theme.blue.css

عنصر واجهة مستلزمات chickyheaders سوف تقوم بالخدعة لك.