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

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％四列的总宽度。但是，parent .header只涵盖100％。这意味着最后的33％不被.header覆盖，因此不是蓝色。

要修复它，只需将您的.display-data样式更改为width: calc(100%/4)即可。