중첩 테이블 행 만들기

Question

중첩 된 행이 여러 개인 복잡한 테이블을 만들어야합니다.

현재 나의 이해는 HTML 표에서 중첩 된 행을 가질 수 없다는 것입니다. 예를 들어,

<table> 
    <tr> 
    <td>header one</td> 
    <td>header two</td> 
    </tr> 

    <tr> 
    <td>One</td> 
    <td> 
     <!-- nested row --> 
     <tr> 
     <td>nested one</td> 
     <td>nested two</td> 
     </tr> 
    </td> 
    </tr> 
</table> 

만들 기대 :

이것은 매우 간단한 exaple입니다. 생성해야하는 테이블에는 여러 개의 중첩 된 행이 있습니다.

행을 설정하는 테이블 속성이 rowspan임을 알고 있습니다. 그러나 rowspan 특성을 사용하지 않고도 오픈 소스 JavaScript 라이브러리 또는 중첩 테이블 행을 만드는 대체 방법이 있는지 궁금합니다.

Answer 1

중첩 된 tr을 새로운 table 요소에 먼저 래핑해야합니다.

table { width: 100%; border-collapse: collapse;} 
 
td { border: 1px solid #000; } 
 
td table { 
 
    margin: -2px; 
 
    width: calc(100% + 4px); 
 
}

<table> 
 
     <tr> 
 
     <td>header one</td> 
 
     <td>header two</td> 
 
     </tr> 
 
    
 
     <tr> 
 
     <td>One</td> 
 
     <td> 
 
    
 
      <!-- nested row --> 
 
      <table> 
 
      <tr> 
 
      <td>nested one</td> 
 
      </tr> 
 
      <tr> 
 
      <td>nested two</td> 
 
      </tr> 
 
      </table> 
 
    
 
     </td> 
 
     </tr> 
 
    </table>

tr는 등 table, thead, tfoot의 자식,

rowspan이 될 수 있지만, 스타일에 훨씬 쉽게됩니다 : 같은 그것은 본다

table { width: 100%; border-collapse: collapse; } 
 
td { border: 1px solid #000; }

<table> 
 
     <tr> 
 
     <td>header one</td> 
 
     <td>header two</td> 
 
     </tr> 
 
    
 
     <tr> 
 
     <td rowspan="2">One</td> 
 
     <td>nested one</td> 
 
     </tr> 
 
     <tr> 
 
     <td>nested two</td> 
 
     </tr> 
 
    </table>

Answer 2

당신은 중첩 된 테이블을 만들어야 할 것입니다 :

<td> 
    <!-- nested row --> 
    <table> 
    <tr> 
     <td>nested one</td> 
     <td>nested two</td> 
    </tr> 
    </table> 
</td>