tr 테이블에 HTML 테이블이 제대로 작동하지 않습니다.

Question

테이블에 tr 테이블이 있습니다. 아래 코드는 호버와 zebra srtip을 적용하고 싶지 않습니다. 내 코드가 작동하지 않습니다. 자식 테이블이 호버와 제브라 스트립을 표시하고 있습니다.

<table class='zebrastrip'> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>4</td> 
    </tr> 
    <tr> 
     <table class='atable'> 
     <tr> 
      <td>5</td> 
      <td>6</td> 
     </tr> 
     <tr> 
      <td>7</td> 
      <td>8</td> 
     </tr> 
     </table> 
    </tr> 
</table> 

    .atable tr:nth-child(2n-1){ 
     background-color:#FFFFFF; 
    } 
    .atable tr:hover{ 
    background-color:#FFFFFF; 
    } 
    .zebrastrip tr:nth-child(2n-1){ 
     background-color:#f9f9f9; 
    } 
    .zebrastrip tr:hover{ 
     background-color:#fce4cc; 
    } 

감사

고정 코드

Answer 1

바이올린 : http://jsfiddle.net/r3eAn/

고정 HTML :

<table class='zebrastrip'> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>4</td> 
    </tr> 
    <tr> 
     <td colspan="2"> 
      <table class='atable'> 
      <tr> 
       <td>5</td> 
       <td>6</td> 
      </tr> 
      <tr> 
       <td>7</td> 
       <td>8</td> 
      </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

당신이 .zebrastrip의 TR에 대한 CSS를 짜 왜 내부 테이블의

배경은 다음

.zebrastrip tr:nth-child(2n-1){ 
    background-color:#f9f9f9; 
} 
.zebrastrip tr:hover{ 
    background-color:#fce4cc; 
} 
.zebrastrip .atable{ 
    background: #FFFFFF; 
} 
.zebrastrip .atable tr:nth-child(2n-1){ 
    background-color:#FFFFFF; 
} 
.zebrastrip .atable tr:hover{ 
    background-color:#FFFFFF; 
}