CSS तालिका td चौड़ाई को कैसे ठीक करें?

• एचटीएमएल का उपयोग करना' चौड़ाई ' गुण
• का उपयोग करना nवें बच्चे () ” चयनकर्ता
• का उपयोग करना <कर्नल> ' उपनाम

विधि 1: HTML 'चौड़ाई' विशेषता का उपयोग करना

' चौड़ाई ” HTML द्वारा प्रदान की जाने वाली एक मूल विशेषता है। यह HTML तत्व की चौड़ाई या क्षैतिज लंबाई निर्धारित करता है। तालिका डेटा को ठीक करने के लिए, नीचे दिए गए चरणों में चौड़ाई विशेषता का उपयोग किया जाता है।

चरण 1: एक तालिका बनाएँ
HTML फ़ाइल में, 'का उपयोग करें' <केंद्र> ” इसके अंदर प्रत्येक तत्व को वेबपेज के केंद्र में प्रदर्शित करने के लिए टैग करें। इसके अंदर, 'का उपयोग करके एक टेबल बनाएं <टेबल> ',' ' और ' <टीडी> ” टैग करें और उसमें डेटा लिखें:

चरण 2: सीएसएस गुणों को 'तालिका' तत्व में जोड़ें
सीएसएस में तालिका तत्व चयनकर्ता का प्रयोग करें और 'जोड़ें' सीमा '1px ठोस लाल,' पाठ संरेखित 'पाठ को केंद्र में संरेखित करता है, और' चौड़ाई ” जो तालिका की समग्र चौड़ाई को 80% पर सेट करता है:

चरण 3: 'टीडी' तत्व को गुण सौंपना
उपयोग ' टीडी 'तत्व चयनकर्ता और' सेट करता है सीमा-नीचे '5px ठोस लाल रंग का,' गद्दी आइटम को अधिक प्रमुख बनाने के लिए 20px का, और ' चौड़ाई ” 30% के रूप में सेट होता है:

चरण 4: गुण को 'वें' तत्व को असाइन करना
उपयोग ' वां 'तत्व चयनकर्ता' का रंग बदलने के लिए सीमा-नीचे ' एक बेहतर विज़ुअलाइज़ेशन बनाने के लिए लाल से समुद्री हरा:

आउटपुट इस प्रकार प्रदर्शित होता है:

उपरोक्त स्नैपशॉट से पता चलता है कि सभी कॉलम की चौड़ाई 30% प्रत्येक पर तय की गई है।

विधि 2: 'nth-child ( )' चयनकर्ता का उपयोग करना

सीएसएस की nth-child() संपत्ति का उपयोग निश्चित-चौड़ाई वाली तालिका बनाने के लिए किया जाता है। यह संपत्ति कॉलम संख्या प्राप्त करती है और 'का चयन करती है' <टीडी> ' और ' <वें> ” टैग। उदाहरण के लिए, चौड़ाई है ' हल किया गया 'केवल स्तंभ संख्याओं के लिए' 1 ' और ' 3 ”। इनमें से प्रत्येक कॉलम को 10% की चौड़ाई मिल रही है। इस आलेख ने सफलतापूर्वक प्रदर्शित किया है कि डेटा तालिका की चौड़ाई को कैसे ठीक किया जाए।

उपरोक्त कोड ब्लॉक का आउटपुट है:

यह आउटपुट प्रदर्शित करता है कि स्तंभ संख्या 1 और 3 10% की चौड़ाई पर नियत हैं।

विधि 3: टैग का उपयोग करना

के अंदर ' मेज सीएसएस भाग में अनुभाग 'जोड़ें' टेबल-लेआउट: फिक्स्ड ' संपत्ति डेटा तालिका तत्वों की 'चौड़ाई' सेट करने के लिए:

HTML फ़ाइल में, 'जोड़ें' <कर्नल> 'के अंदर टैग करें' <टेबल> ' अनुभाग। उदाहरण के लिए, पहले कॉलम की चौड़ाई 15% और दूसरे कॉलम की चौड़ाई 30% तय करें:

उपरोक्त कोड स्निपेट निष्पादित करने के बाद, आउटपुट है:

इस प्रकार उपयोगकर्ता तालिका डेटा तत्वों की चौड़ाई को ठीक कर सकता है।

निष्कर्ष

तालिका डेटा की चौड़ाई को ठीक करने के लिए, 'का उपयोग करें' चौड़ाई ' गुण, ' nth-चाइल्ड ( ) 'विभाजक, और' <कर्नल> ” टैग के तरीके। ' चौड़ाई ” संपत्ति निश्चित चौड़ाई निर्धारित करती है। 'Nth-child ()' विभाजक पैरामीटर के रूप में कॉलम संख्या प्राप्त करता है। इसके अलावा, ' <कर्नल> ” टैग का उपयोग तालिका को लचीला नहीं बनाने के लिए किया जा सकता है। इस लेख में दिखाया गया है कि टेबल डेटा तत्वों की चौड़ाई को कैसे ठीक किया जाए।