첫 번째 행에 영향을주지 않고 테이블의 모든 두 번째 행을 들여 쓰기합니다. html/css/js/jQuery

Question

데이터가 가득한 테이블이 있습니다. 모든 두 번째 행은 모든 첫 번째 행의 하위 행입니다. 부모 행을 클릭하기 전까지 각 자식 행은 숨겨져 있습니다. 그런 다음 jQuery를 사용하여 부모 행 아래에 자식 행을 페이드 인합니다.

부모 행의 자식 노드가 분명히 부모 노드가되도록 하위 행을 들여 쓰려면 어떻게해야합니까?

Ive는 하위 행에 작은 요소를 추가하려고 시도했지만 올바르게 보이지 않습니다. 두 번째 행을 확장하면 첫 번째 행이 파쇄됩니다.

나는

//HTML & CSS 
<table> 
    <tr> 
     <th id="clickDiv3"></th> 
     <th>Firstname</th> 
     <th>Lastname</th> 
    </tr> 
    <tr> 
     <th></th> 
     <td class="showThird">Peter</td> 
     <td class="showThird">Griffin</td> 
    </tr> 
    <tr> 
     <th></th> 
     <td class="showThird">Lois</td> 
     <td class="showThird">Griffin</td> 
    </tr> 
</table> 


    //JS 
    $("#clickDiv3").click(function(){ 
     $(".showThird").slideDown(".500").fadeIn(".200"); 
    }); 

어떤 도움이나 조언

매우 감사하겠습니다 ... jibberish처럼이 나던 소리를 바랍니다!

Answer 1

사실 정확히 테이블 그렇게 할 수 있지만 당신이 시도 할 수 있습니다 :

table tr:nth(3) td { 
    padding-left : 10px; 
} 

을하지만 당신은 너무 많은 열이없는 경우, 당신은 단순히 사용을 위해 테이블 ​​대신 UL를 사용할 수 있습니다. 둘러보기 http://cssdeck.com/labs/pure-css-tree-menu-framework

Answer 2

크로스 브라우저에서 작동하는지 (Chrome에서만 테스트 됨) 확실하지 않습니다. 짝수 행의 모든 ​​세포는 들여 쓰기 (테이블 폭을 오버 플로우)됩니다

tr:nth-child(2n) td { 
    position: relative; 
    left: 20px; 
} 

http://jsfiddle.net/3KJdX/

하지만 당신은 다른 사용자가 당신에게주는 충고에 귀를 기울여야 : 어쩌면 테이블 오른쪽 구조가 아니다 귀하의 데이터.