들여 쓰기 된 계층 적 테이블 구조

각 하위 수준이 부모로부터 더 들여 쓰기되는 중첩 테이블의 계층 적 표시를 만들려고합니다. 나는 테이블이나 div를 사용하고 있습니다. 내가 가장 가까이 온 것은 아래에있다. 그것은 IE에서 거의 똑같이 보입니다 (오른쪽 테두리가 함께 매시지는 것을 제외하고). Chrome에서 하위 항목 테두리는 오른쪽 부모를 넘어 확장됩니다.들여 쓰기 된 계층 적 테이블 구조

divs도 사용할 수 있습니다.

<html> 
<head> 
<style type="text/css"> 
.ItemTable 
{ 
    width: 100%; 
    margin-left: 20px; 
    border: solid 1px #dbdce3; 
} 
</style> 
</head> 
<body> 
    <table class="ItemTable"> 
     <tr> 
      <td>Item 1</td> 
     </tr> 
     <tr> 
      <td> 
       <table class="ItemTable"> 
        <tr> 
         <td>Item 1A</td> 
        </tr> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

출처

2009-04-24 Anonymous

닫기 태그 하나가 누락되었습니다. –

IE7, 파이어 폭스와 크롬에 나를 위해

margin-left: 20px;

padding-left: 20px;

에 작품을 변경 크롬 I가 있었더라도 (다음 창을 해제 극대화를 remaximise - 보이는 나에게 렌더링 버그)

출처

2009-04-24 15:09:17

몇 가지처럼 보입니다. 귀하의 하위 테이블은 가까운 태그이고 내가 들여 쓰기에 도움이되는 TD에 패딩을 추가 실종됐다 :

<style type="text/css"> 
    .ItemTable 
    { 
     width: 100%; 

     border: solid 1px #dbdce3; 
    } 
    .ItemTable td 
    { 
     width: auto; 
     padding-left: 20px; 
     border: solid 1px #dbdce3; 
    } 
</style> 


<table class="ItemTable"> 
    <tr> 
     <td> 
      Item 1 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <table class="ItemTable"> 
       <tr> 
        <td> 
         Item 1A 
        </td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
</table>

크롬, FF, IE6, IE7와 사파리에 그것을 테스트하고 작동 것 같습니다.

출처

2009-04-24 15:12:17 CodeLikeBeaker

표 형식의 데이터를 표시 하시겠습니까? 당신은이에 대한 DIV 년대를 사용하고 정말 당신이 표시하려고에 따라 달라집니다 물론

<style> 
    #container {border:1px solid #999} 
    .indent {margin-left:50px; border:1px solid #999;} 
    .item {background:#99cc00;} 
</style> 

<div id="container"> 
    <span class="item">This is item 1</span> 

    <div class="indent"> 
     <span class="item">This is item 2</span> 

     <div class="indent"> 
      <span class="item">This is item 3</span> 
     </div> 

    </div> 

</div>

아래 그림과 같이 바로 자식 요소에 여백을 적용 좋을 것이다 않은 경우.

출처

2009-04-25 19:51:36 Phunky

들여 쓰기 된 계층 적 테이블 구조

답변

관련 문제