html css hierarchical table

Question

I'm trying to generate a HTML page that shows a tree structure of parent and child objects, This is the excel version.

http://screencast.com/t/xZtkgSUsO (screen shot of current system)

I can make the chart show from top to bottom, but it becomes messy once there is too much text.

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

I'm not sure Tables are the best way to complete this, if so. So I have two problems,

1) Is there a nice way I can hide the text as I don't want the width to go over around 700px? show hide functionality

2) The 4th row will have set of child elements, if I start putting text in each cell it will look really nasty. Any ideas on how to make this look presentable.

I can't be the first person to try this, any help would be appreciated.

Thanks,

This is a very broad question with quite a lot of potential solutions. Perhaps you start trying to solve this and then ask a question if you get stuck? — Josh Burgess
– Josh Burgess, Commented Nov 21, 2014 at 15:36
Hi Josh, Thanks for the response, I've been working on this for along time - Can you give me a pointer ? best method, my html tables aren't doing the job! — user3757888
– user3757888, Commented Nov 21, 2014 at 15:39
What you probaply need is rowspans and colspans which you find here w3schools.com/tags/att_td_colspan.asp w3schools.com/tags/att_td_rowspan.asp — Ruby van Soelen
– Ruby van Soelen, Commented Nov 21, 2014 at 15:42

Mateusz Nowak · Accepted Answer · 2014-11-21 15:50:37Z

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>

Demo: http://jsfiddle.net/xcregz9d/

To hide overflowing text you can create div inside each cell and add following properties

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

It's going to pull all text in one line, hide overflowing content and add ... at the end.

answered Nov 21, 2014 at 15:50

Mateusz Nowak

4,1413 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

html css hierarchical table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related