• 0
Hasiev

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

Вопрос

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

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

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

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

mobile-table.JPG

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

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

desktop-table.JPG

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

 

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


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

10 ответов на этот вопрос

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

  • 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

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

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


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

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

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

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

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

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

Войти

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

Войти сейчас