Как сделать прокручиваемую только одну часть строки div (используя ясность вместо стиля начальной загрузки)

Question

У меня есть угловой проект с точечным ядром, и я борюсь с некоторыми стилями в одном компоненте.

У меня есть строка, которая содержит 2 столбца, первый столбец пуст, а второй столбец содержитдругая строка с несколькими столбцами, заполненными случайными числами, я только хочу сделать второй столбец, который содержит строку с несколькими столбцами, с горизонтальной прокруткой.Первый пустой столбец не должен быть прокручиваемым.

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

Я пробовал white-space: nowrap встиль с overflow-x: auto и установлен на прокрутку, но столбцы, которые должны быть прокручиваемыми, не прокручиваются, вместо этого их укладка друг на друга.

<div class="clr-row ">
  <div class="clr-col-2" style="background-color:aqua">
    <span >.</span>
  </div>
  <div class="clr-col-10" style="overflow-x:auto; width:100%; white-space:nowrap;">
    <div class="clr-row">
      <div class="clr-col" style="background-color:rebeccapurple">
        <span>1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </span>
      </div>
      <div class="clr-col" style="background-color:brown;">
        <span>2 2 2 2 2</span>
      </div>
      <div class="clr-col" style="background-color:burlywood;">
        <span>3 3 3 3 3 3 3 3 3 3 3 3 3 3</span>
      </div>
      <div class="clr-col" style="background-color:cadetblue;">
        <span>4 4 4 4 4 </span>
      </div>
      <div class="clr-col" style="background-color:deeppink;">
        <span> 5 5 5 5 5 5 5 5 5 5 5 5 5 5</span>
      </div>
      <div class="clr-col" style="background-color:greenyellow;">
        <span>6 6 6 6 6 </span>
      </div>
      <div class="clr-col" style="background-color:orange;">
        <span>7 7 7 7 7 7 7 7 7 7 7 7 7 7</span>
      </div>
      <div class="clr-col" style="background-color:black;">
        <span>8 8 8 8 8 8 </span>
      </div>
      <div class="clr-col" style="background-color:dimgrey;">
        <span>9 9 9 9 9 9 9 9 9 9 9 9 9 9</span>
      </div>
      <div class="clr-col" style="background-color:palegoldenrod;">
        <span>0 0 0 0 0 0 </span>
      </div>
      <div class="clr-col" style="background-color:lightcoral;">
        <span>1 1 1 1 1 1 1 1 1 1 1 1 1 1</span>
      </div>
      <div class="clr-col" style="background-color:wheat;">
        <span>2 2 2 2 2 2 </span>
      </div>
      <div class="clr-col" style="background-color:teal;">
        <span>3 3 3 3 3 3 3 3 3 3 3 3 3 3 </span>
      </div>
      <div class="clr-col" style="background-color:Highlight;">
        <span>4 4 4 4 4 4 </span>
      </div>
    </div>
  </div>
</div>

Я хочу, чтобы вторые столбцы, состоящие из строки со множеством столбцов внутри со случайными числами, можно было прокручивать, а первый должен быть статическим.

Снимок экрана с выводом, который я сейчас получаю, когда второй столбец, содержащий строку с множеством столбцов, накладывается друг на друга, а не дает возможность прокручиваться.

Answer 1

Я нашел решение своей проблемы.

Я деформировал второй столбец, который содержит строку со многими столбцами с тегом div, и добавил стилизацию, чтобы сделать этот тег div прокручиваемым, а затем внутри нового тега div, который я использовал, чтобы обернуть столбец, добавил еще один тег div, чтобы увеличить ширину этого тега. столбец больше, чем его установленное значение, это решило проблемы, когда мои столбцы располагались друг над другом

<div class="clr-row ">
  <div class="clr-col-2" style="background-color:aqua">
    <span>.</span>
  </div>
  <div class="clr-col-10">
    <div style="overflow-x:auto;white-space:nowrap">
      <div style="width:1920px">
        <div class="clr-row">
          <div class="clr-col" style="background-color:lavender;float:left">
            <span>1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </span>
          </div>
          <div class="clr-col" style="background-color:brown;float:left">
            <span>2 2 2 2 2</span>
          </div>
          <div class="clr-col" style="background-color:burlywood;float:left">
            <span>3 3 3 3 3 3 3 3 3 3 3 3 3 3</span>
          </div>
          <div class="clr-col" style="background-color:cadetblue;float:left">
            <span>4 4 4 4 4 </span>
          </div>
          <div class="clr-col" style="background-color:deeppink;float:left">
            <span> 5 5 5 5 5 5 5 5 5 5 5 5 5 5</span>
          </div>
          <div class="clr-col" style="background-color:greenyellow;float:left">
            <span>6 6 6 6 6 </span>
          </div>
          <div class="clr-col" style="background-color:orange;float:left">
            <span>7 7 7 7 7 7 7 7 7 7 7 7 7 7</span>
          </div>
          <div class="clr-col" style="background-color:black;float:left">
            <span>8 8 8 8 8 8 </span>
          </div>
          <div class="clr-col" style="background-color:dimgrey;float:left">
            <span>9 9 9 9 9 9 9 9 9 9 9 9 9 9</span>
          </div>
          <div class="clr-col" style="background-color:palegoldenrod;float:left">
            <span>0 0 0 0 0 0 </span>
          </div>
          <div class="clr-col" style="background-color:lightcoral;float:left">
            <span>1 1 1 1 1 1 1 1 1 1 1 1 1 1</span>
          </div>
          <div class="clr-col" style="background-color:wheat;float:left">
            <span>2 2 2 2 2 2 </span>
          </div>
          <div class="clr-col" style="background-color:teal;float:left">
            <span>3 3 3 3 3 3 3 3 3 3 3 3 3 3 </span>
          </div>
          <div class="clr-col" style="background-color:Highlight;float:left">
            <span>4 4 4 4 4 4 </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Пожалуйста, имейте в виду, что я использую ясность, а не самозагрузку, поэтому при запуске сниппета он выглядит иначе, чем на скриншоте.

Скриншот моего вывода.

Answer 2

Не уверен, что я понимаю вашу проблему, но вы можете использовать position: fixed, чтобы исправить первый ряд.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="clr-row ">
  <div class="clr-col-2" style="background-color:aqua; position:fixed; width:100%; top:0;">
    <span>.</span>
  </div>
  <div class="clr-col-10" style="overflow-x:auto; width:100%; white-space:nowrap;">
    <div class="clr-row">
      <div class="clr-col" style="background-color:rebeccapurple">
        <span>1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </span>
      </div>
      <div class="clr-col" style="background-color:brown;">
        <span>2 2 2 2 2</span>
      </div>
      <div class="clr-col" style="background-color:burlywood;">
        <span>3 3 3 3 3 3 3 3 3 3 3 3 3 3</span>
      </div>
      <div class="clr-col" style="background-color:cadetblue;">
        <span>4 4 4 4 4 </span>
      </div>
      <div class="clr-col" style="background-color:deeppink;">
        <span> 5 5 5 5 5 5 5 5 5 5 5 5 5 5</span>
      </div>
      <div class="clr-col" style="background-color:greenyellow;">
        <span>6 6 6 6 6 </span>
      </div>
      <div class="clr-col" style="background-color:orange;">
        <span>7 7 7 7 7 7 7 7 7 7 7 7 7 7</span>
      </div>
      <div class="clr-col" style="background-color:black;">
        <span>8 8 8 8 8 8 </span>
      </div>
      <div class="clr-col" style="background-color:dimgrey;">
        <span>9 9 9 9 9 9 9 9 9 9 9 9 9 9</span>
      </div>
      <div class="clr-col" style="background-color:palegoldenrod;">
        <span>0 0 0 0 0 0 </span>
      </div>
      <div class="clr-col" style="background-color:lightcoral;">
        <span>1 1 1 1 1 1 1 1 1 1 1 1 1 1</span>
      </div>
      <div class="clr-col" style="background-color:wheat;">
        <span>2 2 2 2 2 2 </span>
      </div>
      <div class="clr-col" style="background-color:teal;">
        <span>3 3 3 3 3 3 3 3 3 3 3 3 3 3 </span>
      </div>
      <div class="clr-col" style="background-color:Highlight;">
        <span>4 4 4 4 4 4 </span>
      </div>
    </div>
  </div>
</div>