विशिष्ट कोशिकाओं को बिंदीदार सीमाओं को लागू करने के लिए तालिका पर प्रासंगिक स्टाइल का उपयोग

Question

इस मुद्दे पर मैंने पहले asked a question किया था, जिस पर आपने शानदार उत्तरों की आपूर्ति की थी। मैंने बाद में प्रासंगिक स्टाइल (http://www.w3.org/TR/css3-selectors/#selectors) की नशे की लत शक्ति "खोज" की है - एक बार फिर आप सभी को धन्यवाद - और अब मैं झुका हुआ हूं।

मैं यहाँ मेरे वर्तमान डिजाइन के लिए प्रासंगिक स्टाइल को लागू करने पर अच्छी प्रगति कर दिया है:

http://jsfiddle.net/gFA4p/200/

मैं, हालांकि कुछ समस्या आ जाती है।

मेरा पहला सवाल है, कर रहा हूँ मैं प्रासंगिक नियम लागू होते हैं की कोशिश कर रहा है और यह कठिन की तुलना में यह करने की जरूरत बनाने में ज्यादा किया जा रहा है:

यहाँ मैं क्या कर रहा हूँ का एक स्क्रीनशॉट है?

दो, यदि नहीं, तो स्क्रीनशॉट के अनुसार, मेरे लक्ष्य स्टाइल को पूरा करने के लिए मुझे क्या करने की ज़रूरत है?

तीन, इस क्रॉस-ब्राउज़र को कैसे संगत बनाने के लिए? यहां तक ​​कि, यह अन्य ब्राउज़रों में भद्दा दिखता है।

Answer 1

CSS चयनकर्ताओं का उपयोग लंबे समय के रूप ज्यादा नहीं है, उदाहरण के लिए , अपने HTML में कम className विशेषताएँ के साथ।
इसके अलावा, उन्हें सीखने का सबसे अच्छा तरीका है!

अपने प्रश्न के दूसरे भाग के लिए, मैं आप इस सीएसएस ( http://jsfiddle.net/S8Bne/) का सुझाव:

.geniusPicks {} 

.geniusPicks table {width:100%; font-size:12px; border-collapse:separate;} 

.geniusPicks table tr#picksHeading {border:0px solid; height:30px;} 

.geniusPicks table tr#picksHeading th {background:darkRed; color:white; font-weight:bold;} 

.geniusPicks table tr.pickHeading {border:0px solid;} 

.geniusPicks table tr.pickHeading td {background:red; padding-left:10px;} 

.geniusPicks table tr.pickHeading+tr td:last-child {border-right:solid 1px black;} 

.geniusPicks table tr.pickConsensusBody td { 
    border-left:1px solid; 
    border-top:1px solid; 
    background:grey; 
} 

.geniusPicks table tr.pickBody td { 
    border-left:1px solid; 
    border-top:1px solid; 
} 

.bigGap td {height:19px;} 

.smallGap td {height:10px; border-top:solid 1px black;} 

.geniusPicks table th, 
.geniusPicks table th:last-child, 
.geniusPicks table .pickHeading+tr td, 
.geniusPicks table .pickHeading+tr td:last-child {text-align:center;} 


.geniusPicks table th+th+th, 
.geniusPicks table .pickHeading+tr td+td+td {text-align:left;} 

/* Border Left Radius */ 
.geniusPicks table thead tr#picksHeading th:first-child, .geniusPicks table tr.pickHeading td { 
    border-radius:15px 0 0 0; 
    -moz-border-radius:15px 0 0 0; 
    -webkit-border-radius:15px 0 0 0; 
    -khtml-border-radius:15px 0 0 0; 
} 

/* Border Right Radius */ 
.geniusPicks table thead tr#picksHeading th:last-child { 
    border-radius:0 15px 0 0; 
    -moz-border-radius:0 15px 0 0; 
    -webkit-border-radius:0 15px 0 0; 
    -khtml-border-radius:0 15px 0 0; 
} 


.geniusPicks table .pickHeading+tr td:nth-child(4) { 
    border-left-style:dotted; 
    border-left-color:black; 
    border-left-width:1px; 
    border-top-style:solid; 
    border-top-color:black; 
    border-top-width:1px; 
} 

.geniusPicks table tr.pickConsensusBody td:first-child:not([rowspan]), 
.geniusPicks table tr.pickBody td:first-child:not([rowspan]) { 
    border-top-style:dotted; 
    border-top-color:black; 
    border-top-width:1px; 
    border-left-style:dotted; 
    border-left-color:black; 
    border-left-width:1px; 
}

इस समाधान के साथ अच्छी बात यह है कि यह पूरी तरह से अपना एचटीएमएल कोड को संशोधित करने की आवश्यकता नहीं है।

हालांकि, यदि सीमाएं होनी चाहिए तो सीमाएं स्थिर रहेंगी (उदा। आईई 8) CSS3 :nth-child या :not छद्म-वर्ग का समर्थन नहीं करती है।

मुझे बताएं कि क्या आप कुछ ऐसा पसंद करेंगे जो केवल सीएसएस 2 पर निर्भर करता है। लेकिन उस स्थिति में या तो प्रत्येक सेल में class विशेषता जोड़ने के लिए आवश्यक होगा, जिसे डाला जाना चाहिए या 7 पंक्तियों वाली प्रत्येक पंक्ति को विभाजित करने के लिए आवश्यक है ताकि प्रत्येक "vlah" सेल अपनी पंक्ति का पहला बच्चा बन जाए।

Answer 2

मुझे नहीं लगता कि आप अपने एचटीएमएल में उपयुक्त टीआर और टीडी टैग पर कुछ कक्षाएं डाले बिना इसे पूरा करने में सक्षम होंगे। this fiddle में मैं पहले के वर्ग प्रत्येक पहली पंक्ति टी.आर. को, पिछले के वर्ग प्रत्येक अंतिम पंक्ति टी.आर. में शामिल किया है, और के वर्ग कोशिकाओं है कि बिंदीदार किया जाना चाहिए करने के लिए बिंदीदार। फिर, निम्नलिखित अतिरिक्त शैलियों के साथ मैं यह दिखाने में सक्षम हूं कि आप क्या कर रहे हैं। के रूप में इसे अपने HTML कोड और स्टाइल शीट को समझते हैं और संशोधित करने के लिए, सरल आसान होने की अनुमति देता

.geniusPicks table td.dotted {border: 1px dotted black !important;} 
.geniusPicks table tr.first td.dotted {border-top: none !important;} 
.geniusPicks table tr.last td.dotted {border-bottom-style: solid !important;} 
.geniusPicks table tr.pickBody.first td.dotted {border-top: 1px solid black !important;} 

Answer 3

आपके पहले प्रश्न के उत्तर में, हाँ मुझे लगता है कि आप अति उत्साही हैं। बिंदीदार या ठोस सीमाओं के बारे में चिंता करने के बजाय सामग्री को अधिक उपयोग करने योग्य समय & पढ़ने योग्य क्यों नहीं व्यतीत करें।

वर्तमान स्टाइल (रंग & ठोस काला सीमाएं) आपके उदाहरण में वास्तविक सामग्री को खत्म कर देता है। कुछ संसाधन:

• http://www.uxmatters.com/mt/archives/2005/11/so-the-necessary-may-speak.php
• http://www.lukew.com/ff/entry.asp?550
• http://designshack.co.uk/articles/10-css-table-examples