Как показывать на мобильном только первые столбцы таблицы?

Question

[Rostyslav Biz]

Такой вопрос. Есть пачка страницы с таблицами. Все таблицы с разным кол-вом столбцов.
Есть ли способ на css показывать в мобильной версии только первые два столбца, а остальные скрывать.
Смотрел в сторону

#myTable tr > *:nth-child(2) {
    display: none;
}

но не могу понять как создать условие

Comments

[Сергей delphinpro]

be_a_man,
Сергей,

Зачем сначала скрывать, а потом показывать? Можно просто скрыть все после второго столбика:

td:nth-child(2) ~ td {
  display: none;
}

Rostyslav Biz,
Для таблиц с объединением ячеек вряд ли можно обойтись стилевыми правилами. Слишком непредсказуемые варианты таблиц на входе.
Только если формат таблиц как-то регламентирован и/или таких форматов не много, можно под каждый вариант что-нибудь нахимичить в стилях.

[Сергей]

Сергей delphinpro, не знал про отрицание :) познавательно, спасибо

Answer 1

[be_a_man]

#myTable tr {
    display: none;
}
#myTable tr:nth-child(-n + 2) {
    display: block;
}

Mixin для SCSS lukyvj.github.io/family.scss

Answer 2

[Сергей]

https://codepen.io/anon/pen/JBQaMe
Работает для ширины экрана менее 800px

Comments

[Rostyslav Biz]

Спасибо! Это решение работает с простыми таблицами.
Если таблица такая https://c2n.me/3W6Rkyx.png то получается вот так https://c2n.me/3W6RnYv.png

[Сергей]

Rostyslav Biz, выложите на codepen.io исходник таблицы, подумаем..

[Rostyslav Biz]

Сергей, Выложил.
https://codepen.io/Rosbiz/pen/ZjgQmr
Красным выделены столбцы для наглядности.
Вот все нормально, но эта конструкция цепляет два вложенных столбца.
Как победить - непонятно :)

[Сергей]

Rostyslav Biz, ничего в голову не приходит :( придется, наверное, менять структуру таблиц..