Box-cień pojawia się we wszystkich kolumnach w IE

Question

Daję box-shadow do tr w table To działa poprawnie we wszystkich przeglądarkach, ale w IE-10 to pokazano box-shadow we wszystkich td, dlaczego?

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>

chrom

IE 10

Uwaga: nie mogę używać border dlatego dałem box-shadow

Answer 1

zabrałbym trochę innego podejścia i przypisać cień pole do pierwszych th i td elementów. To rozwiązanie porusza problem, zamiast go rozwiązywać - ale jest tak samo ważne, jak się czuję.

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>