आईई 6 और 7

Question

को छोड़कर सबकुछ में काम करता है, मैं तालिका event_calendar tr के लिए सीमा सेट करने के लिए सीमा निर्धारित करता हूं, यह आईई 6 & को छोड़कर सब कुछ में काम करता है 7. मेरे सीएसएस के साथ क्या गलत है?

table#event_calendar tr { 
    border:1px solid red; 
} 

<div class="content-body"> 
<table id="event_calendar"> 
    <tr class="calendarHeader"> 
     <th><div class="calendarMonthLinks"><a href="http://webdev.herkimer.edu/calendar/2009/03/">&lt;&lt;</a></div></th> 
     <th colspan="5"><h1>April 2009</h1></th> 
     <th><div class="calendarMonthLinks"><a class="calendarMonthLinks" href="http://webdev.herkimer.edu/calendar/2009/05/">&gt;&gt;</a></div></th> 
    </tr> 
    <tr> 
     <td class="calendarDayHeading">Sunday</td> 
     <td class="calendarDayHeading">Monday</td> 
     <td class="calendarDayHeading">Tuesday</td> 
     <td class="calendarDayHeading">Wednesday</td> 
     <td class="calendarDayHeading">Thursday</td> 
     <td class="calendarDayHeading">Friday</td> 
     <td class="calendarDayHeading">Saturday</td> 
    </tr> 
</table> 
</div> 

Answer 1

आईई < tr> टैग के लिए सीमा संपत्ति का सम्मान नहीं करता है। हालांकि, प्रत्येक सेल के चारों ओर एक शीर्ष और निचली सीमा डालकर और "सीमा-पतन: पतन;" का उपयोग करके कामकाज होते हैं। तो कोशिकाओं के बीच कोई जगह नहीं है। मैं सटीक विधि पर this resource here का उल्लेख करूंगा, लेकिन यह अनिवार्य रूप से आपके लिए ऐसा दिखाई देगा (मैंने इसे स्वयं परीक्षण नहीं किया है, इसलिए मुझे यकीन नहीं है कि यह बिल्कुल सही है, लेकिन मुझे लगता है कि आप इस पर निर्भर हो सकते हैं।)

Answer 2

अपने CSS चयनकर्ता चेंज "तालिका # event_calendar टीआर टीडी" और यह काम करना चाहिए।

Answer 3

आपका सीएसएस पर्याप्त समझदार है, लेकिन आईई सिर्फ टी तत्वों पर सीमा नहीं करता है। आप इस शैली का उपयोग यदि आप इच्छित परिणाम हालांकि मिलना चाहिए:

table#event_calendar { 
    border-top:1px solid red; 
    border-right:1px solid red; 
    border-left:1px solid red; 
    border-collapse:collapse; 
} 

table#event_calendar td, table#event_calendar th { 
    border-bottom:1px solid red; 

} 

Answer 4

टीडी पर सीमा निर्धारित करना सबसे आसान उपाय है। लेकिन अगर आप वास्तव में बहुत <tr> पर सीमाओं बनाना चाहते, तो आप हमेशा के लिए सेट कर सकते हैं:

tr { display:block; border-bottom:1px dotted #F00; } 

ऐसा करने से, आप ढीला <td> के बीच आम चौड़ाई। आप उन सभी की चौड़ाई के बराबर बनाना चाहते हैं, inline-block को <td> के लिए प्रदर्शन की स्थापना की और कुछ चौड़ाई सेट:

td { display:inline-block; width:20%; } 

यह मदद करता है जब आप <td> पर और <tr> पर कुछ सीमा आकर्षित करने के लिए चाहते हैं।

सीएसएस जेनरेट की गई सामग्री जैसे tr:before{} या tr:after{} हमेशा भी मदद कर सकते हैं।