html css hierarchical table

Question

부모 개체와 자식 개체의 트리 구조를 보여주는 HTML 페이지를 생성하려고합니다. 이것은 Excel 버전입니다.

http://screencast.com/t/xZtkgSUsO 내가 위에서 아래로 차트 쇼를 만들 수 있습니다

(현재 시스템의 스크린 샷), 그러나 너무 많은 텍스트가 일단 지저분한된다.

http://jsfiddle.net/kvw7yv05/ (예)

<table border CELLSPACING=5 cellpadding="10" width="700px"> 
    <tr> 
     <td colspan=18>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
    </tr> 
    <tr> 
     <td colspan = 6>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td colspan = 4>a load of text here, more more more more more more</td> 
     <td colspan = 3>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td colspan = 4>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td><a href="addnew">Add New</a></td> 
    </tr> 
    <tr> 
     <td>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td><a href="addnew">Add New</a></td> 
     <td>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td><a href="addnew">Add New</a></td> 
     <td>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td><a href="addnew">Add New</a></td> 
     <td>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td>hello dfgdfg dfgdfgdfgdf dfgdfgdfgdfgfd dfgdfgdf</td> 
     <td><a href="addnew">Add New</a></td> 
    </tr> 
</table> 

난이 확실하지 테이블 그렇다면,이를 완료하는 가장 좋은 방법입니다. 그래서 두 가지 문제가 있습니다.

1) 너비가 700px를 넘지 않도록 텍스트를 숨길 수있는 좋은 방법이 있습니까? show hide 기능

2) 네 번째 줄에는 자식 요소 집합이 있습니다. 각 셀에 텍스트를 넣기 시작하면 실제로 더러워 보일 것입니다. 어떻게 보이게 할 수 있는지에 대한 아이디어.

나는 이것을 시도하는 첫 번째 사람이 될 수 없으며, 어떤 도움을 주시면 감사하겠습니다.

감사합니다,

Answer 1

<table> 
    <tr> 
     <td rowspan="4"></td> 
     <td rowspan="2"></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
    </tr> 
    <tr> 
     <td rowspan="2"></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td></td> 
    </tr> 
</table> 

데모 : http://jsfiddle.net/xcregz9d/

당신이 각 셀 내부 사업부를 만들 수 있습니다 넘치는 텍스트를 숨기고 추가하려면 다음과 같은 속성

overflow: hidden; 
text-overflow: ellipsis; 
white-space: nowrap; 

하나에 모든 텍스트를 끌어 것 넘치는 내용을 숨기고 끝에 ...을 추가하십시오.