如何使用媒体查询以块显示形式获取表格

Question

I've been trying to get table elements in "display:block" on a smaller screen size and it worked for quite a while. Sadly I lost my file but I can't seem to get it to work again. Thanks in advance for taking a look, it means a lot!

edit: sadly I'm not allowed to use divs or javascript on the site

tiny part of the 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之前插入逗号。