стек тд при использовании адаптивных классов - PullRequest
Новая
       5

стек тд при использовании адаптивных классов

0 голосов
/ 19 сентября 2018

Я работаю над таблицей, которая скрывает некоторые td, она работает, если я нацеливаюсь на :nth-child(), но когда я использую класс .hidden-xs, она складывает таблицу друг на друга. 

.hidden-xs {
  background: red;
  display: none;
}

td {
  text-align: center;
}

@media screen and (min-width: 992px) {
  .hidden-xs {
    display: block;
    background: grey;
  }
}
<table>
  <tr>
    <th class="hidden-xs">First Name</th>
    <th class="hidden-xs">Last Name</th>
    <th>Age</th>
    <th>Nationality</th>
    <th>Status</th>
    <th>Hotel</th>
    <th>Checked In</th>
    <th>Comments</th>
    <th>Boolean</th>
  </tr>
  <tr>
    <td class="hidden-xs">Nofel</td>
    <td class="hidden-xs">Khan</td>
    <td>30</td>
    <td>American</td>
    <td>Flying</td>
    <td>Holiday Inn</td>
    <td>No</td>
    <td>This is new stuff</td>
    <td>No</td>
  </tr>
</table>

Я не понимаю это поведение?

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Для таблицы, вы должны использовать display: table-cell.Еще один способ сделать это - установить значение display: none при размере экрана менее 992 пикселей:

@ media screen и (max-width: 992px) {.hidden-xs {display: none;фон: красный;}}

0 голосов
/ 19 сентября 2018

Это потому, что вы устанавливаете отображение на block на больших экранах вместо того, что должно быть для ячейки таблицы, table-cell: 

.hidden-xs {
  background: red;
  display: none;
}

td {
  text-align: center;
}

@media screen and (min-width: 992px) {
  .hidden-xs {
    display: table-cell;
    background: grey;
  }
}
<table>
  <tr>
    <th class="hidden-xs">First Name</th>
    <th class="hidden-xs">Last Name</th>
    <th>Age</th>
    <th>Nationality</th>
    <th>Status</th>
    <th>Hotel</th>
    <th>Checked In</th>
    <th>Comments</th>
    <th>Boolean</th>
  </tr>
  <tr>
    <td class="hidden-xs">Nofel</td>
    <td class="hidden-xs">Khan</td>
    <td>30</td>
    <td>American</td>
    <td>Flying</td>
    <td>Holiday Inn</td>
    <td>No</td>
    <td>This is new stuff</td>
    <td>No</td>
  </tr>
</table>
...