html css hierarchical table

html css hierarchical table

本文关键字：table hierarchical css html      更新时间：2023-09-26

我正在尝试生成一个显示父对象和子对象的树结构的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行将有一组子元素，如果我开始在每个单元格中放置文本，它看起来会很讨厌。关于如何使其看起来像样的任何想法。

我不能成为第一个尝试这个的人，任何帮助将不胜感激。

谢谢

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

它将把所有文本拉到一行中，隐藏溢出的内容并在末尾添加...。

相关文章：