Как сделать так, что бы при горизонтальном скролле элемента, у его потомков тянулся фон на всю ширину родителя?

Question

RedSmoke_smr @RedSmoke_smr

HTML
CSS

Как сделать так, что бы при горизонтальном скролле элемента, у его потомков тянулся фон на всю ширину родителя?

Всем привет! Коллеги, подскажите пожалуйста, столкнулся с тобой проблемой, вроде на первый взгляд не сложно все, но ни как не могу ее без костылей решить. У меня есть таблица на бутстрапе у которой должна быть возможность добавлять новые ячейки в строку и есть количество ячеек по ширине больше чем ширина окна браузера должен появляться горизонтальный скролл. Это реализовать не сложно, но вот в чем сложность, возможность горизонтального скролла overflow-x: auto нужно вешать на родителя таблицы, что бы скрошилась вся таблица, а у каждой строки таблицы есть фон и нижняя рамка (именно у строки а не ячейки), и когда появляется горизонтальный скролл этот фон я строки таблицы прорисовывается только как бы на основной ширине экрана, а если таблицу скролить то фон не тянется на всю ширину (вместе со скроллом) таблицы. Да, можно фон и рамку прописывать каждой ячейки таблицы и тогда все норм, но это не устраивает. Подскажите пожалуйста как поступить в такой ситуации.

По ссылке сделал пример демки https://codepen.io/oleg-cyganow/pen/BawXzaL

HTML:

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <h1 class="title">Проверка горизонатльнго скролла</h1>
      <div class="table">
        <div class="table__row table__row--head">
          <div class="table__col table__col-2">
            <span class="table__text">Дата</span>
          </div>
          <div class="table__col table__col-2">
            <span class="table__text">Кол-во</span>
          </div>
          <div class="table__col table__col-2">
            <span class="table__text">Сумма</span>
          </div>
          <div class="table__col table__col-2">
            <span class="table__text">Счет отправил</span>
          </div>
          <div class="table__col table__col-2">
            <span class="table__text">Сумма</span>
          </div>
          <div class="table__col table__col-2">
            <span class="table__text">Компания</span>
          </div>
          <div class="table__col table__col-2">
            <span class="table__text">Подписал</span>
          </div>
          <div class="table__col table__col-2">
            <span class="table__text">Статус</span>
          </div>
        </div>
        <div class="table__row">
          <div class="table__col table__col-2">
            <span class="table__text">Дата</span>
          </div>
          <div class="table__col table__col-2">
            <span class="table__text">Кол-во</span>
          </div>
          <div class="table__col table__col-2">
            <span class="table__text">Сумма</span>
          </div>
          <div class="table__col table__col-2">
            <span class="table__text">Счет отправил</span>
          </div>
          <div class="table__col table__col-2">
            <span class="table__text">Сумма</span>
          </div>
          <div class="table__col table__col-2">
            <span class="table__text">Компания</span>
          </div>
          <div class="table__col table__col-2">
            <span class="table__text">Подписал</span>
          </div>
          <div class="table__col table__col-2">
            <span class="table__text">Статус</span>
          </div>
        </div>
      </div>
    </body>
    </html>

CSS:

html {
      font-size: 14px;
      height: 100%;
    }
    
    body,
    h1, {
      margin: 0;
      padding: 0;
      font-weight: normal;
    }
    
    body {
      color: #000000;
      font-size: 14px;
      font-family: Arial, sans-serif;
      height: 100%;
      line-height: 18px;
      text-rendering: optimizeSpeed;
      scroll-behavior: smooth;
      padding: 50px 0;
    }
    
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    
    .title {
      font-size: 2rem;
      font-weight: 700;
      text-align: center;
      margin-bottom: 20px;
    }
    
    .table {
      overflow-x: auto;
    }
    
    .table__row {
      background-color: #ffffff;
      border-bottom: 1px solid grey;
      display: flex;
      flex-wrap: nowrap;
      &--head {
        background-color: rgba(214, 214, 214, 0.6);
      }
    }
    
    .table__col {
      display: flex;
      justify-content: center;
      flex: 0 0 auto;
      padding: 5px 10px;
      &-2 {
        width: 16.6666%;
      }
      &-3 {
        width: 25%;
      }
    }