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

0

Можно ли отображать контент, как показано на прилагаемом скриншоте, используя структуру div вместо таблицы и только с html/CSS, за исключением использования jQuery для управления переключением.

Немного о точках вывода:

  1. Любая дочерняя строка и ее содержимое не будут видны до тех пор, пока пользователь не нажмет на значок стрелки родительской строки, нажав одну и ту же стрелку, спрячет соответствующую дочернюю строку.
  2. Нажатие на значок стрелки сделает дочернюю строку видимой, используя jQuery для переключения анимации.
  3. Он должен быть отзывчивым.

Изображение 174551

  • 5
    Вы пробовали что-нибудь до сих пор?
  • 3
    а в чем проблема с таблицей?
Показать ещё 7 комментариев
Теги:
responsive-design

1 ответ

2

Я предполагаю, что вы хотели бы сделать что-то вроде этого:

EMBER TABLE
http://addepar.github.io/#/ember-table/overview

И вы можете поместить divs в таблицу, такую как layout с css display:table.

HTML

<div class="mytable">
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>   
    <div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
<div>

CSS

div.mytable {
    display: table;
    width: 100%;
}

div.mytable > div {
    display: table-row;
    width: 100%;
}
div.mytable > div > div {
    display: table-cell;
    width: 20%;
    padding:1em;
}

DEMO

JSFiddle здесь: http://jsfiddle.net/naokiota/jCqm7/3/

И вы можете прочитать эту страницу: Разделите divs в css, как ячейки таблицы в таблицах HTML

Надеюсь это поможет.

Поделиться
  • 0
    Я попытался использовать атрибут таблицы, как вы упомянули выше. Однако анимация переключения, открывающая дочерние элементы с некоторым рывком, не могли бы вы посмотреть, что является причиной проблемы. Вот JSFiddle
  • 0
    @ravk, я посмотрел на твою JSFiddle. Я думаю, я понимаю, что вы имеете в виду. Но не могли бы вы объяснить значение слова «рывок»? Я японец и не очень хорош в английском. Вы имеете в виду, что дочерние элементы движутся непреднамеренно?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню