दिलचस्प पोस्ट
.htaccess mod_rewrite> 500 आंतरिक सर्वर त्रुटि पायथन लैम्ब्डा एक लूप में MediaPlayer का उपयोग कर Android में एक यूआरएल से ऑडियो स्ट्रीमिंग? एंड्रॉइड में ब्रॉडकास्ट रिसीवर के साथ हेडसेट बटन को पंजीकृत करना क्लिक करें कैसे jQuery के साथ फ़ाइल इनपुट आकार की जांच करने के लिए? सामग्री लंबाई के आधार पर आकार बदलने के लिए टेपटेरा किसी ऑरेंज को सरणी में कैसे जोड़ें JOIN और यूनियन के बीच अंतर क्या है? Windows.Forms.Timer या सिस्टम। थ्रेडिंग। टाइमर सी ++ 11 में स्ट्रिंग लीटरल्स के लिए यूनिकोड एन्कोडिंग java arrays.sort 2d सरणी EF4 कोड पहले: एक नेविगेशन प्रॉपर्टी जोड़ने के बिना रिश्ते को कैसे जोड़ता है सदस्य चर के लिए PHP कर्ली ब्रेस सिंटैक्स समूह के सारांश आंकड़े कैसे प्राप्त करें CSS3 रूपांतरण: घुमाएगी; IE9 में

colgroup में टेक्स्ट-संरेखण केंद्र का उपयोग करना

मेरे पन्ने में एक टेबल है, मैं इसी स्तंभ में सभी कोशिकाओं को उसी तरह स्वरूपित करने के लिए colgroups का उपयोग करता हूँ, पृष्ठभूमि रंग के लिए अच्छा काम करता है और सभी। लेकिन यह पता नहीं लगा सकता कि टेक्स्ट-संरेखित केंद्र काम नहीं करता है। यह पाठ केंद्रित नहीं संरेखित करता है

उदाहरण:

<table id="myTable" cellspacing="5"> <colgroup id="names"></colgroup> <colgroup id="col20" class="datacol"></colgroup> <colgroup id="col19" class="datacol"></colgroup> <colgroup id="col18" class="datacol"></colgroup> <thead> <th>&nbsp;</th> <th>20</th> <th>19</th> <th>18</th> </thead> <tbody> <tr> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </tbody> </table> 

सीएसएस:

 #names { width: 200px; } #myTable .datacol { text-align: center; background-color: red; } 

वेब के समाधान से एकत्रित समाधान "colgroup में टेक्स्ट-संरेखण केंद्र का उपयोग करना"

केवल सीएसएस गुणों का एक सीमित सेट कॉलम पर लागू होता है , और text-align उनमें से एक नहीं है।

यह क्यों मामला है के विवरण के लिए "रहस्य का कारण है कि केवल चार गुण तालिका स्तंभ पर लागू होते हैं"

आपके सरल उदाहरण में, इसे ठीक करने का सबसे आसान तरीका ये नियम जोड़ना होगा:

 #myTable tbody td { text-align: center } #myTable tbody td:first-child { text-align: left } 

पहले कॉलम को छोड़कर, सभी तालिका कोशिकाओं को केन्द्रित किया जाएगा। यह आईई 6 में काम नहीं करता है, लेकिन आईई 6 में text-align वास्तव में (गलत) कॉलम पर काम करता है। मुझे नहीं पता कि आईई 6 सभी गुणों का समर्थन करता है, या सिर्फ एक बड़ा सबसेट।

ओह, और आपका HTML अमान्य है। <thead> एक <tr> याद करते हैं

समान प्रश्न देखें: तालिका स्तंभ स्टाइल करने की अनुमति क्यों नहीं है?

आपको केवल सीमा , पृष्ठभूमि , चौड़ाई और दृश्यता गुण निर्धारित करने की अनुमति दी जाती है, इस तथ्य के कारण कि कोशिकाओं को केवल कॉलम के वंशज नहीं हैं, केवल पंक्तियों की।

कुछ समाधान हैं सबसे सरल है स्तंभ में प्रत्येक कक्ष को एक वर्ग जोड़ना। दुर्भाग्य से इसका अर्थ है कि एचटीएमएल ज्यादा है, लेकिन यदि आप डेटाबेस से तालिकाओं का उत्पादन कर रहे हैं तो यह समस्या नहीं होनी चाहिए।

आधुनिक ब्राउज़रों के लिए एक अन्य समाधान (IE6 नहीं है) कुछ छद्म वर्गों का उपयोग करना है tr > td:first-child एक पंक्ति में पहले सेल का चयन करेगा ओपेरा, सफारी, क्रोम और फ़ायरफ़ॉक्स 3.5 भी समर्थन करते हैं :nth-child(n) चयनकर्ता ताकि आप विशिष्ट कॉलमों को लक्षित कर सकें।

आप दूसरे कॉलम से चयन करने के लिए भी td+td का उपयोग कर सकते हैं (इसका अर्थ है "सभी td तत्वों का चयन करें जिनके पास एक बाएं td तत्व है)। td+td+td तीसरे कॉलम से चयन करता है – आप इस फैशन में जारी रख सकते हैं , अधिभावी गुण। ईमानदारी से हालांकि, यह महान कोड नहीं है

निम्न सीएसएस के साथ, आप अपने कॉलम को तदनुसार संरेखित करने के लिए टेबल तत्व में एक या अधिक कक्षाएं जोड़ सकते हैं।

सीएसएस

 .col1-right td:nth-child(1) {text-align: right} .col2-right td:nth-child(2) {text-align: right} .col3-right td:nth-child(3) {text-align: right} 

एचटीएमएल

 <table class="col2-right col3-right"> <tr> <td>Column 1 will be left</td> <td>Column 2 will be right</td> <td>Column 2 will be right</td> </tr> </table> 

उदाहरण: http://jsfiddle.net/HHZsw/