html - 网格中的动态列出现透明背景

Question

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

因此，如果 columns 或 rows 或两者都超出可用的 范围，它应该水平和垂直滚动宽度。

我已经使用以下 CSS 处理了它:

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

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

期望:header 即column 和data-list 即rows，应该能够继承它们各自的背景色。

Demo

Answer 1

更改您的 CSS

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

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

See updated DEMO