Question

I want to expand a column and display a set of rows inside it.

What I am trying to achieve :

What I have achieved so far

My code:

<table style="background-color:lightgreen"  border="1">
 <tr >
     <td>Id</td>
     <td>Name</td>
     <td>Col1</td>
     <td>Col2</td>
     <td>Group Related Column (value for each expanded cell)</td>
     <td>Col4</td>
 </tr>
 <tr >
     <td  rowspan="5" >#1</td> 
     <td  rowspan="5">AFSBEESS1</td>
     <td rowspan="5">
         <tr><td>[-] Group Name</td></tr>
         <tr><td>#1 in Group</td></tr>
         <tr><td>#2 in Group</td></tr>
         <tr><td>#3 in Group</td></tr>
     </td>
    <td rowspan="5">
         <tr><td>[-] Group Name</td></tr>
         <tr><td>#1 in Group</td></tr>
         <tr><td>#2 in Group</td></tr>
         <tr><td>#3 in Group</td></tr>
     </td>

     <td>x</td>
     <td>x</td>
 </tr>

​

My fiddle input : http://jsfiddle.net/yDUZg/78/

What is the best table format to do the same?

Is there some plugins to achieve the same effect of easily grouping the column?

Or a better approach to the problem?

Doing in ASP.NET, but as this is a basic thing , I am tagging it as HTML

Answer 1

Have you looked at something like – http://www.jankoatwarpspeed.com/post/2009/07/20/Expand-table-rows-with-jQuery-jExpand-plugin.aspx ?

This plugin allows you to collapse/expand table rows as required.

You html above is wrong, as you nesting tr within td elements. When you add rowspan="x" to a column, you should omit it for the next x rows. eg,

<table>
<tr>
   <td rowspan="2">Funky</td>
   <td>Joy</td>
</tr>
<tr>
   <td>Fun</td>
</tr>
</table>

You are getting confused over the concept of rowspan – http://www.htmlcodetutorial.com/tables/index_famsupp_30.html

For now, I have created a JSFiddle that does what you have requested. The example is highly specialised, and may not work in a generalised way. In the fiddle, I have removed the rowspan and colspan properties. Feel free to add them in when you are comfortable with what they do.