当浏览器变小时，试图删除表的第三列(CSS)

Question

我制作了一个4行4 col的表。随着浏览器变得越来越小，我想让表格也变得越来越小，首先删除第四个col.，然后随着它变得更小，删除第三个col.

我能够删除第4个col，使用媒体查询和:

table th:last-child,
table td:last-child {
    display:none;
}

我已经尝试使用

让它为第三列工作

table th:nth-last-child (2),
table td:nth-last-child (2){
    display:none;
}

但是行不通。

谢谢你的帮助!

查找完整代码:https://jsfiddle.net/Kahealani1996/vtjf5dnr/

Answer 1

唯一的问题是在n -last-child和(2)之间应该有没有空格。除此之外，它工作得很好。所以你的代码应该是:

    table th:nth-last-child(2),
    table td:nth-last-child(2){
        display:none;
    }

Answer 2

您可以试试这段代码吗?

<style>
table {
    box-sizing:border-box;
    width:460px;
    margin:15px;
    display:block;
    border:double 7px;
    padding:10px;
    line-height:40px;
}
table tr {
    text-align:center;
}
table th {
    font-size:20px;
    width:100px;
}
table td {
    font-size:17px;
}
@media (max-width:768px) {/*Extra-Small Screens*/
table tr th:last-child,  table tr td:last-child {
    display:none;
}
table {
    width:360px;
}
}
@media (max-width:617px) {/*Extra*/
table {
    width:300px;
}
}
@media (max-width:536px) {/*Extra*/
table tr th:nth-last-child(2),  table tr td:nth-last-child(2) {
    display:none;
}
table {
    width:170px;
}
}
</style>