Html 如何使用媒体查询在块显示中获取表

我一直在尝试在较小的屏幕尺寸上获得“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>

---

您在tr前面缺少了一个逗号：

表，thead，tbody，th，td.class1，td.class2，td.class3 tr

是的，注意到忘了编辑它，还是不起作用，可能我还在做错事。您能给我们提供一支代码笔吗？您没有提供足够的html来帮助您。

    .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%;
}