Home/ Questions/Q 912151
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T17:19:56+00:00

I have a table like this below. And there is a div container with

  • 0

I have a table like this below. And there is a div container with information (usually 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? Though, this html is not semantic so if there is another way to do this without a div inside 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">abc@abcd.com</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">def@abcd.com</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">ghi@abcd.com</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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0