Question

我有一个表格，每行3个单元格，一个将始终为空，两个填充它们只是交替信息信息为空;空信息。所以我想在较小的分辨率中摆脱空的，我不确定是否有办法通过媒体查询这样做，或者我应该使用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设置为隐藏

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

1 个答案: