如何使用媒体查询删除 html 表特定列以使其他数据可见(响应)

Question

我有一个表格，我想让它在移动视图中看起来不错。我的想法是我可以删除不需要的数据，以便剩余的数据在移动设备中可见。

所以我决定display:none;给不需要的列，这是在这种情况下的第一个。我这样做有问题。当我display:none特定列数据时，我得到了上列的空白空间，因为它没有类来提供display:none;

我无法编辑标记的来源，那么有没有办法单独使用媒体查询来删除移动设备的列？那只是CSS？

如果可能，怎么做？

.HTML

<table border="1">
    <tr>
        <th>
        </th>
          <th>
              head1
        </th>
          <th>
              head2
        </th>
    </tr>
    <tr>
        <td class="un">
        unwanted-datas
        </td>
   <td>
        datas
        </td>
        <td>
        datas
        </td>
    </tr>
        <tr>
        <td class="un">
        unwanted-datas
        </td>
   <td>
        datas
        </td>
        <td>
        datas
        </td>
    </tr>
           <tr>
        <td class="un">
        unwanted-datas
        </td>
   <td>
        datas
        </td>
        <td>
        datas
        </td>
    </tr>
</table>

.CSS

@media (max-width:480px) {
.un{
    display:none;
}
}

吉斯菲德尔

注意：将输出窗口的大小调整为小于 480 像素以查看效果。

Answer 1

仅限 CSS 的解决方案：

http://jsfiddle.net/2YEzP/1/

我建议您在下面建议的选择器前面使用另一个类/ID，如下所示： .class123 表 tr th：nth-child（1）

或： 表.类45 tr th：nth-child（1）

否则，您可能会破坏网站上的其他表格！

@media (max-width:480px) {
table tr th:nth-child(1),
.un{
    display:none;
}
}

：nth-child（） 选择器在所有主流浏览器中都受支持，IE8 及更早版本除外。

j查询解决方案：

它结合了CSS解决方案并添加了jQuery以添加对旧浏览器的支持。我只推荐那个！

http://jsfiddle.net/aykXG/1/

$( document ).ready(function() {
    $( "table tr th:nth-child(1)" ).addClass( "un" );
});

与上面相同的注释：我建议您在下面建议的选择器前面使用另一个类/ID，如下所示： .class123 表 tr th：nth-child（1）

或： 表.类45 tr th：nth-child（1）

这应该是一个唯一的选择器，将确保您不会影响另一个表格/单元格......

（根据要求，解决方案将 HTML 保持不变。

Answer 2

尝试使用

.CSS

@media (max-width:480px) {
.un{
   visibility:hidden;
}
}

http://jsfiddle.net/LVzjP/

Answer 3

尝试将.un类添加到相应的 th 元素中：

<th class="un">
</th>

http://jsfiddle.net/h9LN7/3/

编辑

由于您无法编辑标记，因此您可以尝试使用 ：nth-child（） 进行如下操作：

tr th:nth-child(1), tr td:nth-child(1){
    display: none;
}

使用上述解决方案，整个第一列将设置为显示 none 甚至不需要.un类

Answer 4

你已经得到了你所要求的，这个演示只显示了第n个孩子的效果。由于您无法编辑标记，因此方法是使用第 n 个孩子，我已经使用它一段时间了，只是喜欢它。

使用第 n 个子级和 jquery，您可以设置类名，以便您或以后的人可以更好地关注元素

$('table tr td:first-child').attr('class', 'un');

这会将类名设置为"un"表标记中每个前 td 列。

或者如果你想采用 css 的方式，并且不确定你是否要移除头部，所以我保持这样：

http://jsfiddle.net/Yb67s/1/