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

[Hasiev]

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

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

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

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

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

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

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

 

[npofopr]

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

[Hasiev]

Только что, npofopr сказал:

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

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

[npofopr]

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

[Hasiev]

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

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

Edited October 12, 2017 by Hasiev

[npofopr]

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

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

[Hasiev]

@npofopr, Спасибо, буду искать\смотреть дальше.

[AlexZaw]

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

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;}

}

 

 

[Hasiev]

4 минуты назад, AlexZaw сказал:

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

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;}

}

 

 

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

[AlexZaw]

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

[Tilonorrinco]

https://jsfiddle.net/nrhx8sqc/1/