CSS - Вложенные строки в таблице

Я хочу, чтобы создать таблицу точно так:CSS - Вложенные строки в таблице

У меня нет доступа к веб-сайту, так что я не могу достаточно проверить таблицу.

Сначала я пытался с таблицами, он работает с рентабельностью-влево, чтобы переместить немного подпункта, но DIV внутри строки не занимает всю высоту, и я хочу, чтобы иметь границу дна точно как в изображении (который начинается после того, как с левого края), и никак не удавалось заставить его работать

Я также попытался использовать DIV, как деревьев, например, так:

<div class="parent"> 
    <div class="parent"> 
    </div> 
</div>

со стилем

.parent > .parent { margin-left: 25px; }

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

Там также обходное использовать классы, как подпункта (маржинальной: 20px), подпункт-2 (маржа: 40px), но я считаю это хак, так что я хотел бы не использовать их, если не я нет выбора

У вас есть фрагмент или любой идея как это сделать? Я не прошу весь код, мне нужно знать только идею этого

источник

2015-11-25 Rares Mardare

Ваша ссылка не работает. – Anna

Это работает для меня. Я изменил ссылку, попробуйте теперь, пожалуйста, –

Я бы рассматривал этот вопрос как слишком широкий ... Но чтобы быть таким же общим, как и вы;) Ваш древовидный подход, скорее всего, будет успешным. Просто прочитайте учебник [tree structure css tutorial] (http://www.thecssninja.com/css/css-tree-menu) или [google еще несколько] (https://www.google.com/search?q= css + дерево + структура) для вдохновения. Это должно указывать на правильное направление. – giorgio

Сохраняя все в таблице и используя ul вместо div должен работать, я думаю. С небольшим количеством JavaScript просто insertRow() и deleteRow(), когда список отображается/скрыт.

источник

2015-11-25 19:34:44 Gendarme

CSS - Вложенные строки в таблице

ответ

Смежные вопросы