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之前插入逗号。

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

1 个答案: