网格中的动态列显示透明背景

Question

我正在我的应用程序中使用div布局开发网格结构。 columns和rows不是固定的，它们是动态的，是从AngularJS中的json数据中提取的。

因此，如果columns或rows或两者都延伸到可用的width之外，它应该水平和垂直滚动。

我使用以下CSS处理它：

.wrapper {
  white-space: nowrap;
  overflow-x: auto;
}

问题是，它不会将背景应用于超出网格宽度的列和行。

期望： 标题即column和数据列表即rows，应该能够继承他们各自的background colors。

Demo

Answer 1

更改CSS

.header .display-data {
  background: lightblue;
}

.data-list .display-data {
  background: white;
}

See updated DEMO

Answer 2

出现问题的原因是您用于计算列宽的CSS。您已为每个.display-data列使用了width: calc(100%/3)，但实际上您有四列。

这意味着您要设置四列133％的总宽度。但是，父.header只能覆盖100％。这意味着.header不包含最后33％，因此不是蓝色。

要解决此问题，只需将.display数据样式更改为width: calc(100%/4)。