响应滚动背景问题

Question

我有以下 CSS，试图做出类似 table 的响应式设计。

.table {
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow-x: auto;
}

.table__row {
  display: flex;
  flex-flow: row nowrap;
}

.table__column {
  flex-shrink: 0;
  display: block;
  align-items: center;
  padding: .54rem 1.05rem;
  width: 300px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

这是一个 JSFiddle：https://jsfiddle.net/abuer473/

问题是当用户向右滚动时，背景会丢失。我该如何解决这个问题？

Answer 1

我能够通过为每个偶数行的列添加背景来解决问题：-

css:

.table__row:nth-child(2n) > .table__column {
  background: #AAA;
}

否则你可以写

css:

.table__row:nth-child(even) > .table__column {
  background: #AAA;
}

DEMO

响应滚动背景问题

Responsive scroll background issue

html

css-tables