Использование Bootstrap 3 как скрыть столбцы в моей таблице?

Я пытаюсь скрыть столбцы для моего отзывчивого дизайна, когда в col-xs и col-sm. Сначала я попытался использовать классы hidden-xs/hidden-sm, но это не сработало. Я также попытался использовать visible-desktop, как упоминалось здесь: Twitter Bootstrap Responsive - показать столбец таблицы только на рабочем столе

Это тоже не сработало. Каков наилучший способ сделать это? Я предпочитаю не делать две отдельные таблицы, а затем скрывать одну или другую.

Код Я пробовал, что в настоящее время не работает:

<table>
    <thead>
        <th>Show All the time</th>
        <th class="hidden-xs hidden-sm">Hide in XS and SM</th>
    </thead>
    <tbody>
        <tr>
            <td>Show All the time</td>
            <td class="hidden-xs hidden-sm">Hide in XS and SM</td>
        </tr>
    </tbody>
</table>

Ответ 1

Код должен работать нормально. Bootstrap поддерживает скрытие/показ th и td с его отзывчивыми классами утилиты https://github.com/twbs/bootstrap/blob/master/less/mixins.less#L504:

// Responsive utilities
// -------------------------
// More easily include all the states for responsive-utilities.less.
.responsive-visibility() {
  display: block !important;
  tr& { display: table-row !important; }
  th&,
  td& { display: table-cell !important; }
}

.responsive-invisibility() {
  display: none !important;
  tr& { display: none !important; }
  th&,
  td& { display: none !important; }
}

Код работает в этом jsFiddle: http://jsfiddle.net/A4fQP/

Ответ 2

Кажется, что hidden-xs/hidden-sm работал раньше, так как принятый ответ имеет много голосов, однако пример скрипта не работает для меня, когда я изменяю размер области. То, что работает для меня, является противоположной логикой, используя visible-md/visible-lg. Я не могу понять, почему, поскольку согласно документации Bootstrap должен поддерживать hidden-xs/hidden-sm.

Рабочая скрипка: http://jsfiddle.net/h1ep8b4f/

<table>
    <thead>
        <th>Show All the time</th>
        <th class="visible-md visible-lg">Hide in XS and SM</th>
    </thead>
    <tbody>
        <tr>
            <td>Show All the time</td>
            <td class="visible-md visible-lg">Hide in XS and SM</td>
        </tr>
    </tbody>
</table>

Ответ 3

Недавно я столкнулся с аналогичной проблемой, работая над отображением таблицы по-разному, в зависимости от размера экрана. Задача для меня заключалась в том, чтобы скрыть один столбец на большом экране и показать его на мобильном устройстве, спрятав еще три столбца (столбец "один" - это сумма данных в "трех" столбцах. Как и предыдущий ответ, я использовал медиа-запрос, но полностью удалил готовые представления bootstrap. Я добавил классы в теги th и td.

Выглядит так:

.full_view {
width: 50px;
  @media(max-width: 768px){
    display: none;
  }
}

.small_view {
  width: 50px;
  @media(min-width: 768px){
    display: none;
  }
}