Question

我正在尝试生成一个显示父对象和子对象树结构的HTML页面，这是excel版本。

http://screencast.com/t/xZtkgSUsO（当前系统的截屏）

我可以让图表从上到下显示，但是一旦文字太多就会变得混乱。

<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;

它会将所有文字拉到一行，隐藏溢出的内容并在最后添加...。

html css分层表

1 个答案: