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

Question

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

所以我决定将 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;
}
}

JSFIDDLE

注意:将输出窗口的大小调整到小于 480px 以查看效果。

Answer 1

仅 CSS 解决方案:

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

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

或者:table.class45 tr th:nth-child(1)

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

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

除 IE8 及更早版本外，所有主流浏览器都支持 :nth-child() 选择器。

jQuery 解决方案:

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

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

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

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

或者:table.class45 tr th:nth-child(1)

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

(根据要求，解决方案保持 HTML 不变。)