2012-02-11 11 views
8

काम नहीं करता है एक सीमा से प्रस्तुत नहीं होती जब मैं tfoot करने के लिए एक सीएसएस सीमा संपत्ति लागू (border-top, border-bottom, border, आदि, कोई भी एक सीमा प्रस्तुत करना)सीएसएस विकल्प tfoot करने के लिए सीमा लागू करने के लिए? के साथ "बॉर्डर-शीर्ष" tfoot स्टाइल

क्या विकल्प हैं वहाँ tfoot या tbody पर सीमा प्रस्तुत करने के लिए? tbody या tfoot पर सीमा लागू कर रहा है?

नीचे नमूना सीएसएस + एचटीएमएल, क्रोम 18, फ़ायरफ़ॉक्स 9 या आईई 9 में कोई सीमा प्रदान नहीं की जाती है।

<style> 
table.sample tfoot 
{ 
border-top: 2px solid black; 
} 
</style> 
<table class="sample"> 
<thead> 
<tr> 
    <td>Date</td><td>DataX</td><td>DataY</td><td>DataZ</td> 
</tr> 
</thead> 
<tfoot> 
<tr> 
    <td colspan="3">Average:</td><td>100</td> 
</tr> 
</tfoot> 
<tbody> 
<tr> 
    <td>Feb1</td><td>22</td><td>333</td><td>44</td> 
</tr> 
<tr> 
    <td>Feb2</td><td>66</td><td>77</td><td>88</td> 
</tr> 
</tbody> 
</table> 

उत्तर

4

कोशिकाओं के अंदर

table { 
border-collapse: collapse; 
} 

और धुन गद्दी के रूप में जोड़ें की जरूरत है।

+0

तालिका तत्व कार्यों पर आपकी शैली घोषणा जोड़ना। अब मुझे एफएफ 10, क्रोम 18, और सफारी 5 में टफूट सामग्री के ऊपर प्रदान की गई एक ब्लैक बॉर्ड दिखाई देती है। मुझे आईई 9 में और ओपेरा 11.6 में सीमा दिखाई नहीं देती है, मुझे _two_ सीमाएं दिखाई देती हैं। – John

+0

आईई 9 पर, यह मोड पर निर्भर करता है; आईई 9 मोड और आईई 8 में यह क्विर्क मोड में काम करता है। ओपेरा व्यवहार वास्तव में अजीब है, क्योंकि यह अनुरोधित सीमा के अलावा, 'thead' तत्व के लिए एक निचली सीमा के अलावा खींचता है। मुझे 'bug.sample thead { सीमा-तल: 2 पीएक्स ठोस पारदर्शी जोड़ने से इस बग के आसपास काम करने का बेहतर तरीका नहीं मिल रहा है; } '। –

1

आप टीफुट और टैक्सी के लिए सीमाएं लागू कर सकते हैं।

सबूत के लिए निम्नलिखित पहेली देखें! (कोशिकाओं के बीच डिफ़ॉल्ट रिक्ति के नुकसान के साथ क्षतिपूर्ति करने के लिए)

http://jsfiddle.net/KHx24/

प्रयास करें

<style type="text/css"> 
    table.sample tfoot 
    { 
     border-top: 2px solid black; 
    } 
</style> 
+0

हाँ, बेला लिंक w/बाहर (शैली प्रदान की (jsfiddle में, Normalize.css इस सेटिंग में शामिल है। वजहों jsfiddle हमेशा क्या होता है के अनुरूप नहीं है में से एक है जब कोड अलग से परीक्षण किया जाता है।) 'पतन') मैं इसे ठीक प्रस्तुत करता हूं और मुझे क्रोम में सीमा दिखाई देती है। लेकिन जैसा कि @ जुक्का ने कहा है कि jsfiddle 'पतन' जोड़ता है, इसलिए जब मैंने स्थानीय रूप से 'पतन' शैली को बाहर निकाला, तो मुझे क्रोम 18 में सीमा दिखाई नहीं दे रही है। लेकिन यह अजीब बात यह है कि आईई 9 में अपने बेवकूफ लिंक को देखकर मैं सीमा देखता हूं, यह अजीब है क्योंकि स्थानीय रूप से मैं आईई 9 में सीमा को नहीं देखता हूं, साथ ही 'टेबल' पर 'पतन' शैली के साथ _with_ मान लीजिए कि क्या झगड़ा करता है)। फिडल कुछ अन्य शैलियों को भी लागू कर रहा है जो IE9 को इस सीमा को प्रस्तुत करने का कारण बनता है, अन्य शैलियों क्या है? – John

संबंधित मुद्दे