响应式滚动背景问题 [英] Responsive scroll background issue

问题描述

我有以下CSS，试图进行响应式表格设计。

I have the following CSS, trying to make a responsive table-like design.

.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/

Here's a JSFiddle: https://jsfiddle.net/abuer473/

问题是，当用户滚动到是的，背景迷路了。如何解决此问题？

The problem is that when a user scrolls to the right, the background gets lost. How do I fix this?

推荐答案

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

I was able to fix the issue by adding background to the columns of every even numbered row:-

css：

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

否则您可以写

css：

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

演示

这篇关于响应式滚动背景问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！