आप समायोज्य कॉलम के साथ एक HTML तालिका कैसे बनाते हैं?

Question

मैं जानना चाहता हूं कि एक टेबल कैसे बनाएं, जहां आप कॉलम चौड़ाई समायोजित कर सकें। मुझे पता नहीं चला कि यह कैसे करें। यदि आप इस तकनीक के लिए गुप्त सॉस जानते हैं तो कृपया मुझे बताएं।

Answer 1

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

Answer 2

याहू यूआई (वाईयूआई) data table विजेट कॉलम का आकार बदलने की अनुमति देता है। यह सार्वजनिक रूप से उपलब्ध है, लेकिन अभी भी बीटा में, और वाईयूआई पुस्तकालय बहुत भारी है। किसी भी कार्यान्वयन को जावास्क्रिप्ट/डीएचटीएम में होना होगा, क्योंकि डिफ़ॉल्ट HTML तालिकाओं में ऐसी क्षमताओं नहीं हैं।

Answer 3

क्या आप दृष्टिकोण के प्रभाव की तलाश कर रहे हैं या < -> जो आपको तालिका का आकार बदलने के लिए दिखाएगा?

• मैंने इसके लिए क्या किया है, एक div या एक सेल बनाया गया है जो केवल कुछ पिक्सल चौड़ा है।
• मैं कर्सर बदलता हूं इसलिए यह एक तीर < -> है।
• उस div नियंत्रण पर उपयोग के क्लिक पर
• उस div नियंत्रण पर उपयोग के क्लिक पर मैं फ्लाई पर एक और 'फ़्लोटिंग' div बनाता हूं जो दिखाता है कि वे अंततः इसे कहां रखेंगे।
• आंदोलन जावास्क्रिप्ट पर माउस चाल घटना के लिए लगा हुआ है।
• एक बार जब रिलीज नियंत्रण हो जाता है तो मैं टेबल सेल ऊंचाई या चौड़ाई को स्थानांतरित करता हूं, जहां उन्होंने नया नियंत्रण स्थानांतरित किया था।

Answer 4

कोई आसान जवाब नहीं है जैसे "कुछ foobar html property का उपयोग करें"। यह जावास्क्रिप्ट और डोम मैनिपुलेशन के साथ किया जाता है।
यदि आप प्रोटोटाइप के साथ इस सुविधा के कार्यान्वयन को देखने के लिए उत्सुक हैं तो आप TableKit पर एक नज़र डाल सकते हैं।
मुझे यकीन है कि वहाँ jQuery कार्यान्वयन हैं ... मुझे मेरा अच्छा पुराना प्रोटोटाइप पसंद है;)

Answer 5

Flexigrid jQuery के लिए बहुत प्यारा लगता है।

अपडेट: -:

$('#myTableID').flexigrid(); 

@ विन्सेंट टिप्पणी के अनुसार उपयोग कर रहा है वास्तव में सरल ... लेकिन सबसे बुनियादी उदाहरण के लिए, पूर्ण विवरण के लिए साइट देखें स्क्रिप्ट शामिल तो अपनी तालिका में कार्यक्षमता हुक

या साथ विकल्प:

$('.classOfTables').flexigrid({height:'auto',striped:false}); 

Answer 6

अपने तालिका की स्तंभ समायोज्य चौड़ाई बनाने के लिए इस CSS जोड़ें ...

th {resize:horizontal; overflow:auto;}