2017-01-17 11 views
7

मैं एक table यह सभी ब्राउज़रों में ठीक काम कर रहा है में tr करने के लिए box-shadow रहा हूं में सभी स्तंभों में दिखाई दे रहा है, लेकिन IE-10 में यह सब td में box-shadow दिखा रहा है, क्यों?बॉक्स छाया आईई

tr { 
 
    box-shadow: 2px 0 0px #888 inset; 
 
}
<table border=0 cellsapcing=0 cellpadding=6> 
 
    <tr> 
 
    <th>Column</th> 
 
    <th>Column</th> 
 
    <th>Column</th> 
 
    <th>Column</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Column</td> 
 
    <td>Column</td> 
 
    <td>Column</td> 
 
    <td>Column</td> 
 
    </tr> 
 
</table>

क्रोम

enter image description here

आईई 10

enter image description here

नोट: मैं border उपयोग नहीं कर सकते है यही कारण है कि मैं box-shadow

उत्तर

6

दिया मैं एक अलग दृष्टिकोण का एक सा काफ़ी होगा, और पहली th और td तत्वों के लिए बॉक्स छाया आवंटित। यह समाधान समस्या को हल करने के बजाए समस्या के चारों ओर चलता है - लेकिन यह उतना मान्य है जितना मुझे लगता है।

tr th:first-child, tr td:first-child { 
 
    box-shadow: 2px 0 0px #888 inset; 
 
}
<table border=0 cellsapcing=0 cellpadding=6> 
 
    <tr> 
 
    <th>Column</th> 
 
    <th>Column</th> 
 
    <th>Column</th> 
 
    <th>Column</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Column</td> 
 
    <td>Column</td> 
 
    <td>Column</td> 
 
    <td>Column</td> 
 
    </tr> 
 
</table>

+0

वास्तव में अपने प्रोजेक्ट में इस दृष्टिकोण अधिक अनुकूलन की जरूरत है तो मैं अंतिम विकल्प के रूप में इस विकल्पों पर विचार कर रहा हूँ। –

+0

भौतिक ''तत्व को शैलियों को असाइन करना हमेशा जोखिम भरा होता है क्योंकि ब्राउजर उन्हें संभालने के तरीके के रूप में सबसे अच्छा असंगत है। मैं वास्तव में आपके जीवन को आसान बनाने के लिए जितनी संभव हो सके टेबल पंक्तियों पर शैलियों से बचने की अनुशंसा करता हूं। – Tom

+0

ठीक है! मैं आपके विकल्प के साथ जा रहा हूं, लेकिन मैं अभी भी जानना चाहता हूं कि यह क्यों हो रहा है, मेरे जीवन को आसान बनाने के लिए धन्यवाद: पी: डी। –

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