• 0
Hasiev

Сложная таблица

Вопрос

В макете попалась сложная секция, с которой мучаюсь 2 день, не могу сам справится. ..

Подразумеваю что это таблица.

Вот так выглядит на мобильниках (слайдер):

Скрытый текст

mobile-table.JPG

Вот так на десктопах: 

Скрытый текст

desktop-table.JPG

Как ее перестраивать? Как верстать, сначала на блоках, потом на css таблицах? То что я пытался сделать, выходит очень мудрено ..

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Рекомендованные сообщения

  • 0

В таблице можно скрытые поля добавить. 
Можно через diaplay: table сделать. В общем, много вариантов.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
Только что, npofopr сказал:

В таблице можно скрытые поля добавить. 
Можно через diaplay: table сделать. В общем, много вариантов.

Это и вызывает сложность, на скрытых ячейках я и делал изначально ..

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Не скрытые ячейки, а скрытые элементы внутри ячеек. Вам по сути то, надо только текст дополнительно отображать на мобиле.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

@npofopr А как на мобилках сделать одним целым блоком каждый тариф? Это ведь слайдер из трех тарифов ..

Если можно, сделайте прототип пожалуйста :)

Изменено пользователем Hasiev

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

Делать мне некогда. Лучше бы вы свой выложили. 
Можете ещё здесь посмотреть, например 

 
Поиском можно много интересного найти.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

в рамках бреда:

https://jsfiddle.net/AlexZaw/tkLxL6jk/

Скрытый текст

<div><table class="option">
  <tr>
    <td class="empty"></td>
  </tr>
    <tr>
    <td>Розовый фильтр</td>
  </tr>
    <tr>
    <td>Смайлики</td>
  </tr>
  <tr>
    <td>Комментарии</td>
  </tr>
</table>
</div><div>
<div><table>
  <tr>
    <td>База</td>
  </tr>
  <tr>
    <td><span>Розовый фильтр</span>+</td>
  </tr>
    <tr>
    <td><span>Смайлики</span>-</td>
  </tr>
    <tr>
    <td><span>Комментарии</span>-</td>
  </tr>
</table>
</div><div>
<table>
  <tr>
    <td>Стандарт</td>
  </tr>
  <tr>
    <td><span>Розовый фильтр</span>+</td>
  </tr>
  <tr>
    <td><span>Смайлики</span>+</td>
  </tr>
    <tr>
    <td><span>Комментарии</span>-</td>
  </tr>
</table>
</div><div>
<table>
  <tr>
    <td>Анлим</td>
  </tr>
  <tr>
    <td><span>Розовый фильтр</span>+</td>
  </tr>
  <tr>
    <td><span>Смайлики</span>+</td>
  </tr>
    <tr>
    <td><span>Комментарии</span>+</td>
  </tr>
</table>
</div>

 

Скрытый текст

div{display: inline-block}
.empty{display:none}
table{border-collapse:collapse;
}
td{border:1px solid grey;min-width: 100px;}
span{display:none}

@media screen and (max-width:550px) {
span{display:inline-block}
.option{display:none}
div{display:block;margin-bottom: 20px;}

}

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
4 минуты назад, AlexZaw сказал:

в рамках бреда:

https://jsfiddle.net/AlexZaw/tkLxL6jk/

  Показать содержимое
  Показать содержимое

 

На 3-х таблицах? Тоже мысль была ..

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

я ж и говорю в рамках бреда :) можно еще вариант с дивами и флексами попробовать

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы