Таблица данных с скользящей информацией - div внутри tr позиционирования

Question

У меня есть такая таблица ниже. И есть div container с информацией (обычно большой текст), поэтому я хочу расположить эти div straight under each tr row, чтобы сделать их переключаемыми (как скользящая панель). Можете ли вы посоветовать, как разместить его с помощью CSS / Javascript? Хотя этот HTML-код not semantic, так что если есть другой способ сделать это без div inside tr (я не могу удалить таблицу в коде, но, может быть, немного dd / dt?) - это будет здорово! *

<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. Я не могу вставить еще одну строку tr после каждой, например <tr><td>&nbsp;</td><td><div class="info">Large text</div></td><td>&nbsp;</td></tr>, потому что эта таблица генерируется Javascript, и когда я делаю это, происходит смещение данных.

Answer 1

Му, я довольно долго боролся с этим в своем приложении ... на самом деле простого решения не существует. Datatables не может обрабатывать colspans, что ограничивает возможность добавлять строки, как вы заметили. Если вы не хотите делать какое-то творческое связывание с divами по старинке, добавление строки в основном не работает. Поскольку Datatables имеет такой жесткий контроль над синтаксисом таблицы, теоретически возможно выполнить какое-то смещение с помощью CSS, но невероятно сложно .... но я подозреваю, что если вы пойдете по этому пути, вы будете делать огромную путаницу из внутреннего javascript HTML вставка.

После долгого стука головы я остановился на Qtip (http://craigsworks.com/projects/qtip/). У меня есть всплывающая подсказка под строкой, из которой он был вызван через контекст и css, что дает квази-иллюзию смещения таблицы Некоторое время я думал о сбрасывании Datatables, но обнаружил, что наши клиенты действительно ценят функциональность, которую он предоставляет, а другие даже близко не подходят. В качестве дополнительного бонуса его очень легко настроить и он очень настраиваем.

Удачи.