Ajustes para mover tela para direita ou esquerda

Front-end
#1

A parte da linha azul, preciso que seja fixa
A parte da linha vermelha, preciso que seja movida para esquerda e direita,
Preciso colocar uma linha preta aonde esta a linha preta, divindo os itens.

image
image.png1562×871 49.1 KB

Já tenho a movimentação, mas toda a tela, mas queria somente para uma parte

image
image.png1075×679 13.2 KB

#2

Coloca em divs separadas, a da direita com scroll horizontal.

1 curtida
#3

Pode me dar um exemplo ?

Meu código está assim:

<div class="table">
      <table>
        <thead>
          <tr>
            <th align="center">Insumos</th>
            <th align="center">Unidade</th>
            <th align="center">Qtd Atual Estoque</th>
            <th align="center">Qtd Total</th>
            <th align="center">Ultimo Custo R$</th>
            <th align="center">Total R$</th>
            <th align="center">Marca Pref</th>
            <th *ngFor="let fornecedor of fornecedores">
              <div align="center">{{ fornecedor.razaoSocial }}</div>
              <table>
                <thead>
                  <tr>
                    <th align="center">Preço</th>
                    <th align="center">Marca</th>
                    <th align="center">Obs</th>
                  </tr>
                </thead>
              </table>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let item of itens">
            <td>{{ item.nomeInsumo }}</td>
            <td>{{ item.nomeUnidade }}</td>
            <td>{{ item.quantidadeEstoque }}</td>
            <td>{{ item.quantidade }}</td>
            <td>{{ item.ultimoCusto | currency }}</td>
            <td>{{ item.total | currency }}</td>
            <td>{{ item.marca }}</td>
            <td *ngFor="let fornecedorItem of item.fornecedoresItens">
              <table>
                <tbody>
                  <tr>
                    <td class="tabelaValor">
                      {{ fornecedorItem.valor | currency }}
                    </td>
                    <td align="center">{{ fornecedorItem.marca }}</td>
                    <td align="center">{{ fornecedorItem.observacao }}</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

css:

div.table {
  overflow-x: scroll;
}

th,
td {
  min-width: 50px;
}