html - 表格显示 block 不适用于媒体查询

Question

我有一张 table ，这是我的 CSS:

table {
 display: block;
 height: 500px;
 overflow-y: scroll;
}

当我添加这个内联时它没问题但在外部不起作用(在媒体查询最大宽度 767px 上)

编辑 |我的媒体查询

@media(max-width:767px) {
 table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}
}

Answer 1

尝试将表格放入 div 包装器中。像这样:

<div class='table-container'>
  <table></table>
</div>

然后在你的CSS中简单地设置

.table-container > table {
  height:100%;
  width: 100%;
}

.table-container {
  height: 500px;
}

查看此 fiddle