टेबल। इन उपकरणों पर तालिकाओं को उत्तरदायी बनाने के लिए, बूटस्ट्रैप "टेबल-उत्तरदायी" वर्ग प्रदान करता है। हालाँकि, आपको यह सुनिश्चित करने के लिए वांछनीय लग सकता है कि पहला कॉलम, जिसमें अक्सर टेबल हेडर होते हैं, निश्चित और दिखाई देते हैं, यहां तक ​​कि उपयोगकर्ता क्षैतिज रूप से स्क्रॉल करता है।

var $ तालिका = $ ('। तालिका'); var $ फिक्स्डकॉलम = $ table.clone ()। INSIRTBEFORE ($ TABLE) .ADDCLASS ('फिक्स्ड-कॉलम'); $ फिक्स्डकॉल्यूम.फाइंड ('th: नहीं (: प्रथम-बच्चे), td: नहीं (: प्रथम-बच्चे)')। निकालें (); $ फिक्स्डकॉल्यूम.फाइंड ('tr')। प्रत्येक (फ़ंक्शन (i, elem) { $ (यह) .height ($ table.find ('tr: eq (' i ')')। ऊंचाई ()); }); }); स्थिति: निरपेक्ष; प्रदर्शन: इनलाइन-ब्लॉक; चौड़ाई: ऑटो; सीमा-सही: 1px ठोस #DDD; पृष्ठभूमि-रंग: #FFF; } @Media (न्यूनतम-चौड़ाई: 768px) { .table-उत्तरदायी> .fixed- कॉलम { कुछ भी डिस्प्ले मत करो; } }

स्पष्टीकरण

] मूल तालिका क्षैतिज रूप से स्क्रॉल करते समय इसे एक निश्चित चौड़ाई और सीमा के साथ पूरी तरह से क्लोन की गई तालिका को स्थान देता है।

$(function(){
    var $table = $('.table');
    var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
    $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
    $fixedColumn.find('tr').each(function (i, elem) {
        $(this).height($table.find('tr:eq('   i   ')').height());
    });
});

और नेविगेशन, विशेष रूप से कई स्तंभों के साथ तालिकाओं के लिए।