如何通过媒体查询获取块显示中的表

Question

我一直在尝试在较小的屏幕尺寸上获取"display:block“中的表元素，并工作了很长一段时间。遗憾的是，我丢失了我的文件，但我似乎不能让它再次工作。提前感谢您的关注，这对我来说意义重大！

编辑:遗憾的是，我不允许在网站上使用div或javascript

html的一小部分

        <tr>
        <td class="class2">
            <img src="../media/BMW/AC.jpg" alt="bmw AC" class="imgProd">
        </td>
        <td class="class2">
            <img src="../media/BMW/IX3.jpg" alt="IX3" class="imgProd">
        </td>
        <td class="class2">
            <img src="../media/BMW/M2.jpg" alt="M2" class="imgProd">
        </td>
        <td class="class2">
            <img src="../media/BMW/M5.jpg" alt="M5" class="imgProd">
        </td>
    </tr>

css

    .tableProducten tbody tr td,
.tablefilter {
    display: none;

}

/*Als de gebruiker de Merken "aanvinkt" laat dit de foto's van de merken zien a.d.h.v. de table rows*/
#class1.tablefilter:checked ~ table tbody td.class1,
#class2.tablefilter:checked ~ table tbody td.class2,
#class3.tablefilter:checked ~ table tbody td.class3 {
    display: table-cell;
}

/*de opmaak van de merken/checklist*/
.tablefilter + label {
    cursor: pointer;
    background-color: dimgrey;
    color: #ffffff;
    padding: 3px;

}

/*kleur wanneer een merk aangevinkt is*/
.tablefilter:checked + label {
    background-color: #ffffff;
    color: dimgrey;
}
@media
 screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td.class1,td.class2,td.class3 tr{
        display: block;
    }
}

.tableProducten {
    margin-left: 20%;
    margin-right: 20%;
}

Answer 1

tr前缺少逗号：table, thead, tbody, th, td.class1,td.class2,td.class3 tr <--在tr前插入逗号。