Question

我希望在调整窗口大小或屏幕尺寸很小时隐藏一些table td。我试过CSS media queries

th:nth-last-child(-n+7) {display:none}
td:nth-last-child(-n+7) {display:none}
th:last-child {display:none}
td:last-child {display:none}

它有效，但CSS无法计算td，因此如果一个表只有三个td，那么上面的代码会隐藏所有三个td。请帮我用jQuery实现这个目的：隐藏td调整大小或屏幕尺寸很小，

如果屏幕宽度为768px，则仅显示六个td并隐藏其他内容右侧
如果屏幕宽度为480px，则仅显示四个td并隐藏其他内容右侧
如果屏幕宽度为320px，则仅显示三个td并隐藏其他内容从右侧

Answer 1

改为使用:last-child和max-width媒体查询。

td:nth-child(n+7)只影响从第七个单元格开始的单元格，td:nth-child(n+5)只会影响从第五个单元格开始的单元格，依此类推。

@media (max-width:768px) {
    td:nth-child(n+7),th:nth-child(n+7) {display:none}
}
@media (max-width:480px) {
    td:nth-child(n+5),th:nth-child(n+5) {display:none}
}
@media (max-width:320px) {
    td:nth-child(n+4),th:nth-child(n+4) {display:none}
}

http://jsfiddle.net/mblase75/GsxPK/

在调整大小时隐藏表td

1 个答案: