एचटीएमएल टेबल कॉलम को आकार देने योग्य कैसे करें?

Question

मेरे पास काफी मानक बूटस्ट्रैप-स्टाइल <table> है। मैं इस तालिका के कॉलम को आकार देने योग्य बनाना चाहता हूं, उदा। <th> तत्व की दाएं सीमा पर क्लिक करके और खींचकर। मैं किसी भी jQuery प्लगइन का उपयोग नहीं कर सकता क्योंकि मैं कोणीय का उपयोग कर रहा हूं और jQuery निर्भरता स्वीकार्य नहीं है।

मैं सोच रहा था कि अगर मैं क्लिक/<th> तत्व की सही सीमा पर MouseMove घटना पकड़ सकते थे, मैं अपने ही आकार बदलने तर्क को लागू कर सकता है (क्षैतिज माउस आंदोलन पर नजर रखने और चौड़ाई अनुसार समायोजित), लेकिन मुझे पता नहीं कैसे यह किया जा सकता है (जहां तक ​​मुझे पता है तत्व तत्व-संबंधित घटना जैसी कोई चीज नहीं है)।

उपयोगकर्ता द्वारा स्तंभों को आकार देने योग्य बनाने का सबसे अच्छा तरीका क्या है? JQuery के बिना (और अधिमानतः - कोणीय 2 संदर्भ में)।

Answer 1

यदि आप इसे स्वयं लागू करना चाहते हैं तो आप शायद जटिल चीजों से अधिक हो।

ag-grd है कि सभी की उम्मीद तालिका कार्यों संभालती कोणीय 2 के लिए एक शानदार ग्रिड पुस्तकालय (फिर से आकार, फिर से आदेश आदि ...)

आप सादे जावास्क्रिप्ट संस्करण या एजी-ग्रिड कोणीय 2 का उपयोग कर सकते है ag-grid-ng2

"एजी ग्रिड से घटक एक उद्यम ग्रेड जावास्क्रिप्ट डाटा ग्रिड है। एजी ग्रिड के प्रयोजन के एक डेटा ग्रिड कि उद्यम सॉफ्टवेयर ऐसे रिपोर्टिंग और डेटा विश्लेषण, व्यापार के रूप में निर्माण अनुप्रयोगों के लिए उपयोग कर सकते हैं प्रदान करना है वर्कफ़्लो और डेटा प्रविष्टि "

Answer 2

resize संपत्ति तालिका के साथ काम नहीं, thats तुम क्यों वें मेज और टीडी के अंदर एक div शब्दों में कहें, तो यह आकार बदलने, के साथ प्रयास करने की आवश्यकता नीचे झलकी

table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0px; 
 
} 
 
td { 
 
    border: 2px solid black; 
 
    padding: 0; 
 
    margin: 0px; 
 
    overflow: auto; 
 
} 
 

 
div { 
 
    resize: both; 
 
    overflow: auto; 
 
    width: 120px; 
 
    height: 120px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    border: 1px solid black; 
 
    display:block; 
 

 
} 
 

 
td div { 
 
    border: 0; 
 
    width: auto; 
 
    height: auto; 
 
    min-height: 20px; 
 
    min-width: 20px; 
 
}

<table> 
 
    <tr> 
 
    <td><div>one</div></td> 
 
    <td><div>two</div></td> 
 
    <td><div>three</div></td> 
 
    </tr> 
 
    <tr> 
 
    <td><div>four</div></td> 
 
    <td><div>five</div></td> 
 
    <td><div>six</div></td>   
 
    </tr> 
 
    <tr> 
 
    <td><div>seven</div></td> 
 
    <td><div>eight</div></td> 
 
    <td><div>nine</div></td>  
 
    </tr> 
 
</table>

Answer 3

मत करो। इसके बजाय बूटस्ट्रैप का प्रयोग करें। बूटस्ट्रैप को अंतिम उपयोगकर्ताओं के लिए आकार बदलने का निर्णय लेने दें।
- कॉलम का आकार बदलना डिवाइस पर अच्छी तरह से काम नहीं करेगा। - आप सर्वर या ब्राउज़र में कॉलम चौड़ाई को याद रखने के लिए मजबूर हो सकते हैं जो बहुत सारे काम के रूप में समाप्त हो सकता है। क्या यह वहां खत्म होगा? कॉलम फिर से किया जाना चाहिए? क्या उन्हें हटाने योग्य होना चाहिए? अंतिम उपयोगकर्ता पर वापस सब कुछ फाड़ने के बजाय कुछ डिज़ाइन विकल्प बनाना बेहतर होता है।