स्थिति: इंटरनेट एक्सप्लोरर

Question

में सापेक्ष छुपा सीमा मेरे पास एक सारणी है जहां शीर्ष पंक्ति स्थिति है: सापेक्ष। आईई 9 में स्थिति विशेषता जोड़ना कोशिकाओं के बीच की सीमा को छुपाता है। (यह क्रोम में नहीं होता है)।

मेरा प्रश्न this one, जैसा है लेकिन मैं अन्य पंक्तियों की तुलना में शीर्ष पंक्ति के जेड-इंडेक्स को सेट नहीं कर सकता क्योंकि यह एक निश्चित शीर्षलेख होने वाला है जिसके लिए उच्च जेड-इंडेक्स होना आवश्यक है।

एचटीएमएल

<table border="1"> 
      <tr > 
       <td class="locked">header 1</td> 
       <td class="locked">header 2</td> 
      </tr> 
      <tr > 
       <td>data 1a</td> 
       <td>data 1b</td> 
      </tr> 
      <tr > 
       <td>data 2a</td> 
       <td>data 2b</td> 
      </tr> 
     </table> 

सीएसएस

.locked { 
      position: relative; 
      background-color: Yellow; 
     } 

मैं कैसे सीमा दिखाने के लिए है, लेकिन अन्य कोशिकाओं की तुलना में अधिक से अधिक z- सूचकांक रहते हो?

संपादित करें: यहां jquery कोड है जो बताता है कि हेडर स्थिति क्यों सापेक्ष है।
1. यह हेडर को क्षैतिज और लंबवत स्क्रॉल करने की अनुमति देता है।
2. जब आप पेज को स्क्रॉल करते हैं तो 153 पिक्सेल अधिक होता है तो हेडर स्क्रीन के शीर्ष पर रहता है।

$(document).ready(function() { 
    $(window).scroll(function(){ 
     var off = $(window).scrollTop(); 
     if (off < 153) { 
      $(".frozenTop").css("top", 0); 
     } else { 
      $(".frozenTop").css("top", off - 153); 
     } 
    }); 
}); 

Answer 1

प्रयास करें इस शायद सहायक

<td class="locked"><div>header 1</div></td> 
<td class="locked"><div>header 2</div></td> 

table { 
border-spacing: 0px; 
} 
.locked { 
    position: relative; 
    border:none; 
} 
.locked div{ 
    border:2px black solid; 
    background-color: Yellow; 
    margin:-2px; 
} 

jsFiddle

Answer 2

तो CSS3 समर्थित ब्राउज़र के लिए ही, CSS3 संपत्ति पृष्ठभूमि क्लिप मदद कर सकते हैं:

.locked { 
    position: relative; 
    background-color: Yellow; 
    background-clip: padding-box; 
} 

इस बारे में विवरण संपत्ति: