Data Grid Table with sliding info - div inside tr positioning

Question

Hello!! I have a table like this below. And there is a div container with information (usualy large text), so I want to position these divs straight under each tr row to make them toggleable (like sliding panel). Can you please advise how to position it with css/javascript? Tho, this html is not semantic so if there is another way to do this without a div insdide tr (I can't remove table in the code, but maybe some dd/dt?) - it'll be great!

<table width="100%" id="datatable" class="table-sortable">
    <thead>
     <tr>
      <th id="th_name">Name</th>
      <th id="th_email" class="table-th-sort ">E-mail</th>
      <th id="th_birthday">Birthday</th>
     </tr>
    </thead>

    <tbody>

    <tr class="table-tr-group-head">
      <td class="someclass">Name1</td>
      <td class="table-td-sort">[email protected]</td>
      <td class="someclass">01.01.1981</td>
      <div class="info">Large text1</div> <!-- this one -->
    </tr>

    <tr class="table-tr-group-head">
      <td class="someclass">Name2</td>
      <td class="table-td-sort">[email protected]</td>
      <td class="someclass">02.02.1982</td>
      <div class="info">Large text2</div>  <!-- this one -->
    </tr>

    <tr class="table-tr-group-head">
      <td class="someclass">Name3</td>
      <td class="table-td-sort">[email protected]</td>
      <td class="someclass">03.03.1983</td>
      <div class="info">Large text3</div>  <!-- this one -->
    </tr>

</tbody></table>

P.S I cannot inject another tr row after each like <tr><td>&nbsp;</td><td><div class="info">Large text</div></td><td>&nbsp;</td></tr> because this table is generated by javascript and somehow when i make it there is a data shift.

Answer 1

Moo, I fought with this one for quite a while on my app....there's no simple solution really. Datatables can't handle colspans, which limits the ability to add rows as you've noticed. Unless you want to do some creative spanning of divs the old fashioned way, adding a row is basically out. Since Datatables has such tight control of the table syntax, doing some sort of shifting via CSS could be theoretically possible, but incredibly difficult....but I suspect if you went this route, you'd be doing a massive jumble of javascript inner html insertion.

After banging my head for quite a while, I settled for Qtip (http://craigsworks.com/projects/qtip/) I have the tip pop under the row it was triggered from via context and css, which gives a quasi-illusion of the table shifting. For a while I considered dumping Datatables, but I found that our customers really appreciate the functionality that it provides and others don't even come close. As an added bonus, it's very easy to setup and is very customizable.

Good luck.