css - 使用媒体查询将 3 个表格单元格更改为 2 个

Question

我有一个表格，每行有 3 个单元格，一个总是空的，两个填充的，它们只是像 info info empty 一样交替出现；空信息信息。所以我想在较小的分辨率下摆脱空的，我不确定是否有办法通过媒体查询来做到这一点，或者我应该使用 JS。

HTML:

<div style="display: table;">
    <div class="tr">
        <div class="tc side"></div>
        <div class="tc year">
            2016
        </div>
    </div>
</div>

CSS:

.tr {
    display: table-row;
}
.tc {
    display: table-cell;
}
.side{
    width: 45%;
}
.year{
    text-align: center;
}

Answer 1

你可以只使用媒体查询为元素设置display:none，前提是你可以CSS选择它

@media screen and (max-width: 767px) {
  .tr > div.empty {
    display: none;
  }
}

当屏幕宽度小于 767px 时，这会将 .tr > div.empty 设置为隐藏