Как лучше всего скрыть столбец таблицы для мобильного просмотра

у меня есть таблица HTML, в мобильном браузере мне нужно скрыть некоторые из ее столбцов.

Я хочу скрыть 2 или 3 из этих cols, используя @media запросы, если это возможно. приведенный ниже код не работает для меня:

<table>
   <tr>
      <td></td>
      <td class='collapsable'></td>
      <td class='collapsable'></td>
      <td></td>
   </tr>
</table>


      //hide cols here
      td.collapsable {display:block; }

      @media only screen and (min-width: 450px) {
           //show cols here
           td.collapsable {display:none; }
      }
9
css3 html html-table

4 ответов

что-то вроде этого? (попробуйте изменить размер окна/панели результатов)

HTML:

<tr>
    <td class="one">corpse</td>
    <td>corpse</td>
    <td>corpse</td>
</tr>

CSS-код:

table{
        width: 50%;
    }
    td, th{
        border: 1px solid orange;
    }


    @media only screen and (max-width: 900px) {
        .one{
            display: none;
        }
    }
9

держите HTML и разметку таблицы чистой, используя nth-child, чтобы скрыть столбец. Должны работать с любым современным браузером, который поддерживает медиа запросы.

вот образец скрипки, показывающий его в действии. Измените размер панели результатов, чтобы она работала.

https://jsfiddle.net/tycahill/xm0nwr7x

на очистить HTML-код:

<table>
  <tr>
    <td>Column 1a</td>
    <td>Column 2a</td>
    <td>Column 3a</td>
  </tr>
  <tr>
    <td>Column 1b</td>
    <td>Column 2b</td>
    <td>Column 3b</td>
  </tr>
</table>

CSS, чтобы скрыть второй столбец:

@media only screen and (max-width: 800px) {
  td:nth-child(2) {
    display:none;
  }
}
2

план B: поместите DIV в каждую ячейку. Класс DIVs по столбцам. Спрячь Дивов. Возможно, вам придется настроить cellpadding/cellspacing вашей таблицы и поместить его на .cell DIV для поддержания предыдущего внешнего вида.

<table>
   <tr>
      <td><div class='cell'></div></td>
      <td><div class='cell collapsable'></div></td>
      <td><div class='cell collapsable'></div></td>
      <td><div class='cell'></div></td>
   </tr>
</table>
1

Я думаю, что ваш пример имеет display:block и display:none переключить. Кроме того, я бы рекомендовал использовать display: table-cell; вместо display: block;, так как table-cell является дисплеем по умолчанию для <td> элементы. Этот CSS работал для меня, а также является мобильным первым подходом:

td.collapsable {display:none; }

@media only screen and (min-width: 450px) {
  td.collapsable {display:table-cell; }
}
0