테이블 내에서 테두리를 접는 방법

Question

this과 같은 html 구조가 있는데 문제를 해결하는 방법을 알 수 없습니다.

<table border="0" cellspacing="0" cellpadding="0" align="center" width="200px" class="external"> 
    <tr> 
     <th>Firstname</th> 
     <th>Lastname</th> 
    </tr> 
    <tr> 
     <td>Peter</td> 
     <td>Griffin</td> 
    </tr> 
    <tr> 
     <td>Lois</td> 
     <td> 
      <table border="0" cellspacing="0" cellpadding="0" align="center" width="100%" class="internal"> 
       <tr> 
        <th>Firstname</th> 
        <th>Lastname</th> 
       </tr> 
       <tr> 
        <td>Peter</td> 
        <td>Griffin</td> 
       </tr> 
       <tr> 
        <td>Lois</td> 
        <td>Griffin</td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table> 

내가 외부 테이블과 <td> 내부의 테이블 사이의 경계를 축소하고 싶습니다. 가능합니까?

외부 테이블의 다른 색상으로 내부 테이블의 테두리를 갖고 싶습니다.

Answer 1

외부 테이블이 아닌 내부 테이블에있는 셀의 테두리가 나타납니다. 까다로운 점은 당신이 그 세포의 경계를 완전히 끄고 싶지 않다는 것입니다. 왜냐하면 그 세포가 국경을 넘을 것이기 때문입니다.

이는 당신이 해제해야 국경을 다루는 의사 선택기를 사용

.internal { 
    border: none; 
} 
.internal td, 
.internal th { 
    border-color: yellow; 
} 
.internal tr:first-child th { 
    border-top: none; 
} 
.internal tr:last-child td { 
    border-bottom: none; 
} 
.internal tr td:first-child, 
.internal tr th:first-child { 
    border-left: none; 
} 
.internal tr td:last-child, 
.internal tr th:last-child { 
    border-right: none; 
} 

보십시오. 그것은 장황 하긴하지만, 필요한 것을 할 것입니다.

https://jsfiddle.net/aff19ahg/3/