Как сделать <div>, <span> или список отображения табличных данных в виде таблицы?

Во-первых, позвольте мне сказать, что я прочитал другие ответы на это, и я понимаю, что для табличных данных использование таблиц - лучший способ. Причина, по которой мне нужно использовать что-то другое, кроме таблицы, заключается в том, что я использую jQuery-плагин (JQuery UI sortable to exact), который требует, чтобы определенные ряды данных были вложены внутри других. Я не знаю, как это сделать с таблицами, и поэтому мне нужно использовать другой элемент (в настоящее время я использую div).

Мои данные - это стандартные табличные данные, которые являются 1 ячейкой на единицу данных.

Name  Address              
Bob   123 Main    edit_button  drag&drop_button
Joe   123 Fake    edit_button  drag&drop_button
Sue   456 Road    edit_button  drag&drop_button
Ann   123 Street  edit_button  drag&drop_button

В этом примере, перетаскивая Боба, он также перетащит Джо и Сью, команду Боба. Энн может перемещаться только на три или ниже трех, в то время как Джо и Сью могут только переключаться друг на друга.

В html это выглядит следующим образом.

<div class="table">
    <div class="header">Header information</div>
    <div>
        <div class="row">Bob information</div>
        <div>
            <div class="row">Joe information</div>
            <div class="row">Sue information</div>
        </div>
    </div>
    <div>
        <div class="row">Ann information</div>
    </div>
</div>

Насколько мне известно, это вложение не может быть выполнено с помощью таблиц.

Мне не нужно использовать divs, если что-то еще будет работать лучше.

Мой вопрос в основном заключается в том, как я могу получить эту информацию в табличном формате?

В настоящее время лучше всего поставить каждый элемент данных, включая заголовки, в div с фиксированной шириной (и применять границы по мере необходимости для внешнего вида), но это означает, что "таблица" не может изменять размер, чтобы наилучшим образом соответствовать предоставленная информация.

Еще одна попытка, которую я сделал, которая, возможно, намного беспощадна, состоит в том, чтобы каждая строка имела новую таблицу с той же настройкой, которая включает заголовок, который не отображается. Это дает почти тот вид, который я хочу, но некоторые интервалы заметно отключаются, если имена не являются точной длиной.

Спасибо за помощь.

P.S. Я надеюсь, что реальный вопрос не слишком конкретный, хотя я считаю, что мое оправдание тому, почему таблица не работает, кажется слишком специфичной.

Edit:

Будет ли какой-то способ заставить следующее работать, чтобы можно было использовать таблицу?

<table>
    <thead>table header stuff</thead>
    <tbody>
        <mtne*>
            <tr>Bob information</tr>
            <mtne>
                <tr>Joe information</tr>
            </mtne>
            <mtne>
                <tr>Sue information</tr>
            </mtne>
        </mtne>
        <mtne>
            <tr>Ann information</tr>
        </mtne>
    </tbody>
</table>

* mtne = элемент размещения мифических таблиц.

Изменить 2:

При дальнейшем тестировании я обнаружил, что стиль css, чтобы заставить divs вести себя как таблицы, имеет ту же проблему. где, если строки не размещены рядом друг с другом, а некоторые - вложенными, они не делят данные ширины. Из-за ограничений по времени мне нужно просто переключиться на использование div с предустановленной шириной.

Кому-нибудь, кто может приехать, может быть некоторая возможность при использовании treeTables, но я еще не проверил его и мне нужно для перемещения.

Ответы

<div class="table">
  <div class="header">
    <div class="cell">Name</div>
    <div class="cell">Address</div>
    <div class="cell">Action 1</div>
    <div class="cell">Action 2</div>
  </div>
  <div class="rowGroup">
    <div class="row">
      <div class="cell">Bob</div>
      <div class="cell">Address</div>
      <div class="cell">Button</div>
      <div class="cell">Another button</div>
    </div>
  </div>
  <div class="rowGroup">
    <div class="row">
      <div class="cell">Joe</div>
      <div class="cell">Address</div>
      <div class="cell">Button</div>
      <div class="cell">Another button</div>
    </div>
    <div class="row">
      <div class="cell">Sue</div>
      <div class="cell">Address</div>
      <div class="cell">Button</div>
      <div class="cell">Another button</div>
    </div>
  </div>
  <div class="rowGroup">
    <div class="row">
      <div class="cell">Ann</div>
      <div class="cell">Address</div>
      <div class="cell">Button</div>
      <div class="cell">Another button</div>
    </div>
  </div>
</div>

.table {
    display:table;
}
.header {
    display:table-header-group;
    font-weight:bold;
}
.rowGroup {
    display:table-row-group;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    width:25%;
}

<table>
  <thead>
    <tr>
      <th>Outer Table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob information
        <table>
          <thead>
            <tr>
              <th>Inner Table</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Joe information</td>
            </tr>
            <tr>
              <td>Sue information</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>Ann information</td>
    </tr>
  </tbody>
</table>