使用响应式类时的td堆栈

Question

我正在处理隐藏一些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>

我不理解这种行为吗？

Answer 1

这是因为您将大屏幕上的显示设置为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>

Answer 2

对于表格，您应该使用display: table-cell。另一种方法是在屏幕尺寸小于992px时将其设置为display: none：

  

@media屏幕和（最大宽度：992px）{.hidden-xs {display：none;背景：红色； }