html - 如何最好地隐藏移动视图的表格列

Question

我有一个 HTML 表格，在移动浏览器中我需要隐藏它的一些列。

如果可能，我想使用@media查询隐藏 2 或 3 个这些列。下面的代码对我不起作用：

<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; }
      }

Answer 1

像这样的东西？（尝试调整结果窗口/窗格的大小）

的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;
        }
    }

Answer 2

通过使用 nth-child 隐藏列来保持 HTML 和表格标记的清洁。应该适用于所有支持媒体查询的现代浏览器。

这是一个演示它的示例小提琴。调整结果窗格的大小以使其正常工作。

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;
  }
}

Answer 3

计划 B：在每个单元格中放置一个 DIV。按列对 DIV 进行分类。隐藏 DIV。您可能需要调整表格的 cellpadding/cellspacing 并将其放在.cellDIV 上以保持以前的外观。

<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>

Answer 4

我认为您的示例已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; }
}