Как сделать так чтобы при разворачиваемости div блок на все строку?

У меня такая проблема, допустим вот пример
$('.header').click(function(){ if($(this).hasClass('expand')){ $(this).closest('table').find('.header').addClass('expand'); $(this).closest('table').find('.child').remove(); $(this).removeClass('expand').after('

blahblahblahblahblahblahblahblah

Привет мир

'); } else { $(this).addClass('expand').parent().find('.child').remove(); } }); table, tr, td, th { border: 1px solid black; border-collapse:collapse; } .header:hover{ cursor: pointer } .header .sign:after{ content: '-' } .header.expand .sign:after{ content: '+' }

Класс	Код	Город	Дата создание	Дата редактирование
Мебель	1	Казань	2017-03-10 10:00:00	2017-03-10 10:30:00
Электроника	2	Москва	2017-03-15 09:15:00	2017-03-15 10:30:00
Бытовая химия	3	Санк-Петербург	2017-03-10 10:00:00	2017-03-10 10:30:00

Когда разворачиваешь строку. то весь div блок равняется под столбец, а мне нужно чтобы она шла под всю строку. А то как-то некрасиво получается и если там будут 3 колонки в блоке, то таблица 1 столбец будет вообще громадная. А мне бы хотелось, чтобы таблица сохраняла свои пропорции

Ответ

Добавляйте в таблицу строку с одной ячейкой, перекрывающей пять существующих.
$(this).removeClass('expand') .after('

blahblahblahblahblahblahblahblah

Привет мир

');
Там только есть минус, в том, что если подключить bootstrp и использовать класс col-xs-, то не совсем удобно выходит. https://jsfiddle.net/hollanditkzn/x2bcukw7/12/
Поставьте не два col-xs-4, а два col-xs-6 - общее количество бутстраповских колонок должно равняться 12-ти.