html css分層表

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？顯示隱藏功能

2）第4行將有一組子元素，如果我開始在每個單元格中放置文本，它會看起來非常討厭。任何想法如何使這個看起來可信。

我不能成爲第一個嘗試這個，任何幫助將不勝感激。

感謝，

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/

要隱藏你可以創建每個單元格內的div四溢的文字，並添加以下屬性

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

它要拉一個所有文字行，隱藏溢出內容並在末尾添加...。