<tbody>तत्व को स्क्रॉल करने योग्य बनाने के लिए , हमें पृष्ठ पर प्रदर्शित होने वाले तरीके को बदलने की आवश्यकता है अर्थात display: block;ब्लॉक स्तर के तत्व के रूप में प्रदर्शित करने के लिए।
चूंकि हम displayसंपत्ति को बदलते हैं tbody, इसलिए हमें theadतालिका लेआउट को तोड़ने से रोकने के लिए उस संपत्ति को भी बदलना चाहिए ।
तो हमारे पास:
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
वेब ब्राउज़र को प्रदर्शित theadऔर tbodyजैसे तत्वों पंक्ति-समूह ( table-header-groupऔर table-row-group) डिफ़ॉल्ट रूप से।
एक बार जब हम इसे बदल देते हैं, तो अंदर के trतत्व अपने कंटेनर के पूरे स्थान को नहीं भरते हैं।
इसे ठीक करने के लिए, हमें tbodyस्तंभों की चौड़ाई की गणना करनी होगी और theadकॉलम के लिए जावास्क्रिप्ट के माध्यम से संबंधित मूल्य को लागू करना होगा।
ऑटो चौड़ाई कॉलम
यहाँ उपरोक्त तर्क का jQuery संस्करण है:
// Change the selector if needed
var $table = $('table'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
और यहाँ आउटपुट है (विंडोज 7 क्रोम 32 पर) :
काम कर रहा डेमो ।
पूर्ण चौड़ाई तालिका, सापेक्ष चौड़ाई कॉलम
जैसा कि मूल पोस्टर की जरूरत है, हम इसके कंटेनर के table100% तक विस्तार कर सकते हैं width, और फिर तालिका के प्रत्येक कॉलम के लिए एक रिश्तेदार ( प्रतिशत ) का उपयोग कर सकते हैं width।
table {
width: 100%; /* Optional */
}
tbody td, thead th {
width: 20%; /* Optional */
}
चूंकि तालिका में एक (प्रकार) द्रव लेआउट है , इसलिए हमें theadकंटेनर के आकार के अनुसार कॉलम की चौड़ाई को समायोजित करना चाहिए ।
इसलिए हमें विंडो के आकार बदलने के बाद कॉलम की चौड़ाई निर्धारित करनी चाहिए:
// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs
उत्पादन होगा:
काम कर रहा डेमो ।
ब्राउज़र समर्थन और विकल्प
मैंने प्रमुख वेब ब्राउजर (IE10 + सहित) के नए संस्करणों के माध्यम से विंडोज 7 पर दो उपरोक्त तरीकों का परीक्षण किया है और यह काम किया है।
हालाँकि, यह IE9 और उसके नीचे ठीक से काम नहीं करता है ।
ऐसा इसलिए है क्योंकि एक तालिका लेआउट में , सभी तत्वों को समान संरचनात्मक गुणों का पालन करना चाहिए।
का उपयोग करके display: block;के लिए <thead>और <tbody>तत्वों, हम तालिका संरचना टूट गए हैं।
जावास्क्रिप्ट के माध्यम से नया स्वरूप
एक दृष्टिकोण (संपूर्ण) तालिका लेआउट को फिर से डिज़ाइन करना है। मक्खी और हैंडल पर एक नया लेआउट बनाने और / या कोशिकाओं की चौड़ाई / ऊंचाइयों को गतिशील रूप से समायोजित करने के लिए जावास्क्रिप्ट का उपयोग करना।
उदाहरण के लिए, निम्नलिखित उदाहरणों पर एक नज़र डालें:
घोंसले के शिकार टेबल
यह दृष्टिकोण एक युक्त div के साथ दो नेस्टेड तालिकाओं का उपयोग करता है। पहली tableमें केवल एक कक्ष होता है जिसमें एक होता है div, और दूसरी तालिका उस divतत्व के अंदर रखी जाती है ।
CSS Play पर वर्टिकल स्क्रॉलिंग टेबल की जाँच करें ।
यह अधिकांश वेब ब्राउज़र पर काम करता है। हम उपरोक्त तर्क को जावास्क्रिप्ट के माध्यम से गतिशील रूप से भी कर सकते हैं।
स्क्रॉल पर निश्चित हेडर के साथ तालिका
ऊर्ध्वाधर स्क्रॉल पट्टी को जोड़ने के उद्देश्य से जब से <tbody>तालिका प्रदर्शित कर रहा है हैडर प्रत्येक पंक्ति के शीर्ष पर, हम कर सकता है स्थितिthead रहने के लिए तत्व fixedके बजाय स्क्रीन के शीर्ष पर।
यहाँ जूलियन द्वारा निष्पादित इस दृष्टिकोण का एक कार्यशील डेमो है ।
इसमें एक आशाजनक वेब ब्राउज़र समर्थन है।
और यहां विलेम वैन बॉकस्टल द्वारा एक शुद्ध सीएसएस कार्यान्वयन ।
शुद्ध सीएसएस समाधान
यहाँ पुराना जवाब है। बेशक मैंने एक नई विधि जोड़ी है और सीएसएस घोषणाओं को परिष्कृत किया है।
निश्चित चौड़ाई वाली तालिका
इस मामले में, tableएक निश्चित होना चाहिए width (स्तंभों की चौड़ाई का योग और ऊर्ध्वाधर स्क्रॉल-बार की चौड़ाई सहित) ।
प्रत्येक स्तंभ की एक विशिष्ट चौड़ाई होनी चाहिए और तत्व के अंतिम स्तंभ को theadअधिक से अधिक चौड़ाई की आवश्यकता होती है जो दूसरों की चौड़ाई + ऊर्ध्वाधर स्क्रॉल-बार की चौड़ाई के बराबर होती है ।
इसलिए, सीएसएस होगा:
table {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
}
tbody, thead tr { display: block; }
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 140px;
}
thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
यहाँ उत्पादन है:
काम कर रहा डेमो ।
100% चौड़ाई वाली तालिका
इस दृष्टिकोण में, की tableचौड़ाई है 100%और प्रत्येक के लिए thऔर td, widthसंपत्ति का मूल्य इससे कम होना चाहिए 100% / number of cols।
इसके अलावा, हम कम करने की जरूरत चौड़ाई के theadके मूल्य के रूप में चौड़ाई ऊर्ध्वाधर स्क्रॉल पट्टी के।
ऐसा करने के लिए, हमें CSS3 calc()फ़ंक्शन का उपयोग करने की आवश्यकता है , इस प्रकार है:
table {
width: 100%;
border-spacing: 0;
}
thead, tbody, tr, th, td { display: block; }
thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width: -moz-calc(100% - 16px);
width: calc(100% - 16px);
}
tr:after { /* clearing float */
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 19%; /* 19% is less than (100% / 5 cols) = 20% */
float: left;
}
यहाँ ऑनलाइन डेमो है ।
नोट: यह दृष्टिकोण विफल हो जाएगा यदि प्रत्येक कॉलम की सामग्री लाइन को तोड़ती है, अर्थात प्रत्येक सेल की सामग्री पर्याप्त रूप से कम होनी चाहिए ।
निम्नलिखित में, शुद्ध सीएसएस समाधान के दो सरल उदाहरण हैं जो मैंने उस समय बनाया था जब मैंने इस प्रश्न का उत्तर दिया था।
यहाँ jsField Demo v2 है ।
पुराना संस्करण: jsFiddle डेमो v1
