Bootstrap 4 горизонтальная прокрутка - только гибкий (табличный) контент, несколько строк одновременно - PullRequest
Новая
       32

Bootstrap 4 горизонтальная прокрутка - только гибкий (табличный) контент, несколько строк одновременно

0 голосов
/ 16 ноября 2018

Я хочу сделать таблицу (?) С помощью Bootstrap 4 flex и иметь возможность прокручивать содержимое внутри по горизонтали.

Моя идея , это , но я не могу заставить его работать с цветом фона строки. В моей таблице около двадцати столбцов, поэтому она имеет широкую ширину, и поэтому более половины ее не имеет фона ... Могу ли я заставить его работать с этим макетом или он никак не будет работать с фоном строки?

Пример 

    <header>
 <nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="myImg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>
</header>

<div class="container-fluid myTable">
  <div class="row text-center flex-nowrap">
    <div class="col-sm-4">1</div><!--
 --><div class="col-sm-4">2</div><!--
 --><div class="col-sm-4">3</div><!--
 --><div class="col-sm-4">4</div><!--
 --><div class="col-sm-4">5</div><!--
 --><div class="col-sm-4">6</div><!--
 --><div class="col-sm-4">7</div><!--
 --><div class="col-sm-4">8</div><!--
 --><div class="col-sm-4">9</div>
  </div>

  <div class="row text-center flex-nowrap">
    <div class="col-sm-4">1</div><!--
 --><div class="col-sm-4">2</div><!--
 --><div class="col-sm-4">3</div><!--
 --><div class="col-sm-4">4</div><!--
 --><div class="col-sm-4">5</div><!--
 --><div class="col-sm-4">6</div><!--
 --><div class="col-sm-4">7</div><!--
 --><div class="col-sm-4">8</div><!--
 --><div class="col-sm-4">9</div>
  </div>


.myTable
{
  overflow-x: auto;
}

/* Decorations */
.row:nth-child(odd)
  {
    background-color: pink;
  }

.row:nth-child(even)
  {
    background-color: purple;
  }
...