Question

这里是responsive table contained in a grid。表格显示正确的响应行为-当屏幕宽度减小到表格宽度以下时，如预期的那样，水平滚动条出现在表格下方。没问题。

在这里，该表具有响应性，可以将其包装在其overflow-x属性设置为auto的容器中：

.tblwrp {
  overflow-x: auto;
}

  <div class="tblwrp">
    <table>
       ...
    </table>
  </div>

此处，以上标记包含在wrapper元素中，该元素的display属性设置为grid。该代码段中未显示。

但是这里是responsive table contained in an element within a grid。现在，出现了一个问题-该表变得不响应。如果减小屏幕宽度，尽管.tblwrp元素的定义仍较早：

，但整个页面的水平滚动条将出现，而不仅仅是表格。

.tblwrp {
  overflow-x: auto;
}

  <div class="content">
    <div class="tblwrp">
      <table>
         ...
      </table>
    </div>
  </div>

这是上述问题的solution。现在，该表再次变得响应。显然，该解决方案涉及将overflow-x属性从tblwrp元素移至其容器content：

  .content {
    grid-area: cn;

    overflow-x: auto;
  }

最后，我在这里扩展了问题。我现在有一个grid containing an element which contains another element which finally contains the responsive table。这里的解决方案再次涉及将overflow-x属性上移一级：

  .content1 {
    overflow-x: auto;
  }

  <div class="content1">
    <div class="content">
      <div class="tblwrp">
        <table>
          ...
        </table>
      </div>
    </div>
 </div>

我知道如何解决此问题。我只是不明白为什么这种解决方案有效。我想弄清为什么必须以这种方式将overflow-x属性上移。

响应表在网格的包含元素中变得无响应

0 个答案: