1

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;
}

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?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
NathanB
  • 105
  • 6

1 Answers1

2

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;
}

or else you could write

css:

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

DEMO

Sam C.
  • 66
  • 5
  • Sam, why do you think its not working on `table__row`? Do you think nested `display:flex` can be the reason? – Vikas Jul 15 '18 at 03:57
  • Mm.. I also don't understand this behavior o.O It seems the background doesn't get applied beyond the boundaries of its parent container. – Sam C. Jul 15 '18 at 04:14