[Vuejs]-How to add a separate scrollbar to each css grid row?

by

2👍

If you make each row a separate grid, you’ll be able to scroll them individually. But then it doesn’t really make sense having column titles in the first row, because they won’t scroll across with the data.

body {
  background: silver;
  margin: 1em;
}
.container {
  background: #f2f2f2;
}
.container>div {
  display: grid;
  grid-template-columns: repeat(3, 1000px);
  gap: 1em;
  overflow-x: scroll;
  margin-bottom: 0.5em;
  background: white;
}
<div class="container" id="comparison-table-container">

  <div>
    <div>Title 1</div>
    <div>Title 2</div>
    <div>Title 3</div>
  </div>

  <div>
    <div>Bla Bla</div>
    <div>test Test</div>
    <div>some some</div>
  </div>

  <div>
    <div>Bla Bla</div>
    <div>test Test</div>
    <div>some some</div>
  </div>

  <div>
    <div>Bla Bla</div>
    <div>test Test</div>
    <div>some some</div>
  </div>

</div>

Leave a comment