तालिका फिक्स्ड हेडर और पहला कॉलम सीएसएस/एचटीएमएल

Question

मेरे पास एक सारणी है जिसमें बड़ी संख्या में लाइन और कॉलम हैं। लेकिन मैं हेडर तय करना चाहता हूं और पहला कॉलम तय करना चाहता हूं। मुझे जो चाहिए वह एक तस्वीर है।

केवल गुलाबी हिस्सा क्षैतिज और खड़ी स्क्रॉल चाहिए लेकिन दूसरों को स्क्रॉल के दौरान दिखाई रहना चाहिए। मेरी मेज एक div में है। सबसे पहले, क्या मुझे एक टेबल या चार (नीला, लाल, हरा एक और गुलाबी वाला) का उपयोग करना चाहिए?

मैं इस बेला में लिखा है:

http://jsfiddle.net/5XWqj/1/

मैं पहली बार शीर्ष लेख को ठीक करने की कोशिश की लेकिन मैं एक सफलता

#container thead { 
    position: fixed; 
    top: 0; 
} 

और कुछ इस तरह का चयन करें और पहले ठीक करने के लिए नहीं था कॉलम

#container tbody tr td:first-child { 
    position: fixed; 
    left: 0; 
} 

लेकिन यह di के बारे में ठीक नहीं है v जो मेरी मेज लपेटता है। शायद मुझे कुछ jQuery या जावास्क्रिप्ट की आवश्यकता होगी?

यदि कोई मदद कर सकता है।

Answer 1

हो सकता है आप कुछ इस तरह की तलाश में हैं:

http://zurb.com/playground/playground/responsive-tables/index.html

आपको बस जे एस और सीएसएस फ़ाइलों में शामिल हैं और केवल अपनी मेज तत्व को class='responsive' जोड़ने है।

मैंने आपके कोड के साथ इसे लागू करने का प्रयास किया, लेकिन रोशन के साथ कुछ समस्या थी, इसलिए इसे थोड़ा सा tweaked।

http://jsfiddle.net/UqYgq/3/

मैं तुम्हें भी इसी तरह से खड़ी स्क्रॉल करना चाहता था लगता है। अगर मुझे इसके साथ मदद करनी चाहिए तो मुझे बताएं?

Answer 2

मैंने फिक्स्ड कॉलम एक्सटेंशन के साथ केवल एक तालिका और डेटाटेबल्स प्लगइन के साथ एक ही समस्या हल की। आप extesion के डेमो देख सकते हैं: http://datatables.net/release-datatables/extras/FixedColumns/

मेरी समाधान में मैं अपने thead खंड में एक मेज है, पंक्तियों मैं जमे हुए है करना चाहते हैं (आप पहले कक्ष के लिए rowspan सकता है) कर रहे हैं। और फिक्स्ड कॉलम एक्सटेंशन मेरे लिए पहले दो कॉलम जम गया।

DataTables प्लग में init मैं प्रयोग किया है:

duplicatesTable = $('.js-merge-duplicates-table').dataTable({ 
      //I want standard table look - no DataTables features but frozen header 
      "bPaginate": false, 
      "bLengthChange": false, 
      "bFilter": false, 
      "bSort": false, 
      "bInfo": false, 
      "bAutoWidth": false, 
      "sScrollX": "100%", 
      "sScrollY": "500", 
      "bScrollCollapse": true 
     }); 
     new FixedColumns(duplicatesTable, { 
      "iLeftColumns": 2, //maybe you would need only one column 
      "iLeftWidth": 350 
     });