Расширение строки таблицы с помощью jQuery для таблицы div css

Question

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

Для большей наглядностипример см. jExpand плагин jQuery , который делает именно это, но на обычной html-таблице.

Здесь jsfiddle с кодом

Моя цель - когда я нажимаю на имя Алисы, между Алисой и Бернардом создается новый div.

Этот новый div должен иметь ширину таблицы.И это большое дело.Никакого colspan в таблице css.

Я думаю о пустом ряду заполнителя со вторым абсолютным div сверху, но не могу придумать какой-нибудь элегантный способ сделать это.

Answer 1

Наконец-то придумали что-то не очень элегантное, но работающее.

См. Этот jsFiddle (Используйте кнопку «Загрузить информацию», а затем нажмите на строку)

Все еще есть некоторые недостатки, такие как невозможность использования slideToggle () jQuery вместо toggle (). Если у кого-нибудь есть решение, позволяющее использовать элемент с абсолютно позиционированным дочерним элементом, дайте мне знать.

Я надеюсь, что это поможет кому-то еще:)

Answer 2

Это третий вопрос "css div table", с которым я столкнулся сегодня. Ответ - «используй стол».

создание того же самого с divs как таблицы

как создать этот CSS?

Answer 3

Как то так? http://jsfiddle.net/95aZb/