Во-первых, позвольте мне сказать, что я прочитал другие ответы на это, и я понимаю, что для табличных данных использование таблиц - лучший способ. Причина, по которой мне нужно использовать что-то другое, кроме таблицы, заключается в том, что я использую 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, но я еще не проверил его и мне нужно для перемещения.