1

Estou com um problema há dois dias e não consigo resolvê-lo. Preciso criar uma tabela onde a primeira coluna seja fixa na horizontal, mas permita movimenta-la verticalmente, e o header seja fixo na vertical mas permita movimentação horizontal. Preciso fazer isso para que o conteúdo da tabela possa ser movimentado horizontal através de um scroll na horizontal e para que o header sempre seja mostrado.

Já li algumas questões e a grande maioria utiliza position:fixed no entanto isso não funciona para mim. Preciso fazer isso apenas com CSS e HTML, sem JavaScript. Existe alguma forma de fazer isso?

.table .thead-white th {
  color: #fff;
  background-color: #4a5b7eff;
  border-color: #4a5b7eff;
  padding: 0.1rem .75rem 0.1rem .75rem;
  cursor: pointer;
}

.table .thead-white th:hover {
  background-color: #465577ff;
  color: #fff;
}

.table .thead-cinza th {
  color: #fff;
  background-color: #52658cff;
}

.table .thead-white th i {
  padding: 0.8rem 0.5rem 0.7rem 0.5rem;
  line-height: 1.5rem;
  font-size: 1.3rem;
}

.barras {
  color: #fff !important;
  background-color: #4a5b7eff !important;
  cursor: default !important;
  padding: 1rem !important;
}

.table {
  text-align: center;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: #dadcddff !important;
}

.table td,
.table th {
  border-right: 0.5px solid #52658cff;
  border-left: 0.5px solid #52658cff;
  border-top: 0 !important;
  color: #52658cff;
  padding: 1.1rem 0 1.1rem 0;
  width: 20rem;
  min-width: 20rem;
}

.table thead th {
  border-bottom: 0 !important;
}

tbody tr th {
  color: #52658cff;
}

.container_info {
  width: 100%;
  background-color: #e6e7e8ff;
  margin: 0 !important;
  padding: 0 !important;
  margin-top: 0.2rem;
  word-wrap: break-word;
}

span {
  font-size: 16px !important;
  margin-bottom: 1rem;
}

.container_info .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.border-azul {
  border-color: #52658cff !important;
}

.badge-danger {
  color: #fff;
  background-color: #c23531ff !important;
}

.badge-success {
  color: #373435ff !important;
  background-color: #91c7aeff !important;
}

.headcol {
  position: sticky !important;
  left: 0 !important;
  background-color: #dadcddff;
  z-index: 99 !important;
  border-right: 0.5px solid #52658cff !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-principal">
  <div class="table">
    <table class="table table-striped">
      <thead class="thead-white">
        <tr id="fixo1">
          <th scope="col" class="barras headcol">Cód. Barras</th>
          <th id="btn_cod_barras" scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
          <th scope="col"><i class="fas fa-barcode-read"></i></th>
        </tr>
      </thead>
      <thead class="thead-cinza">
        <tr id="fixo2">
          <th class="headcol" scope="col">Grupo Comercial</th>
          <th scope="col">Cliente 1</th>
          <th scope="col">Cliente 2</th>
          <th scope="col">Cliente 3</th>
          <th scope="col">Cliente 4</th>
          <th scope="col">Cliente 5</th>
          <th scope="col">Cliente 6</th>
          <th scope="col">Cliente 7</th>
          <th scope="col">Cliente 8</th>
          <th scope="col">Cliente 9</th>
          <th scope="col">Cliente 10</th>
          <th scope="col">Cliente 11</th>
          <th scope="col">Cliente 12</th>
          <th scope="col">Cliente 13</th>
          <th scope="col">Cliente 14</th>
          <th scope="col">Cliente 15</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th id="drops" class="headcol" scope="row">Drops</th>

          <td>
            <span class="badge badge-warning">66%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 3</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 4,99</p>
                </div>
              </div>
            </div>
          </td>

          <td>
            <span class="badge badge-success">100%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 3</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 4,99</p>
                </div>
              </div>
            </div>
          </td>

          <td>
            <span class="badge badge-danger">0%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 3</p>
                </div>
                <div class="col-6"></div>
              </div>
            </div>
          </td>

          <td>
            <span class="badge badge-danger">0%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>

            </div>
          </td>

          <td>
            <span class="badge badge-warning">50%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>

            </div>
          </td>
          <td>
            <span class="badge badge-warning">66%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 3</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 4,99</p>
                </div>
              </div>
            </div>
          </td>
          <td>
            <span class="badge badge-danger">0%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>

            </div>
          </td>
          <td>
            <span class="badge badge-danger">0%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>

            </div>
          </td>
          <td>
            <span class="badge badge-warning">66%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 3</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 4,99</p>
                </div>
              </div>
            </div>
          </td>
          <td>
            <span class="badge badge-warning">66%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 3</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 4,99</p>
                </div>
              </div>
            </div>
          </td>
          <td>
            <span class="badge badge-warning">66%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 3</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 4,99</p>
                </div>
              </div>
            </div>
          </td>
          <td>
            <span class="badge badge-warning">66%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 3,79</p>
                </div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 3</p>
                </div>
                <div class="col-6">
                  <p class="mb-0">R$ 4,99</p>
                </div>
              </div>
            </div>
          </td>
          <td>
            <span class="badge badge-danger">0%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>

            </div>
          </td>
          <td>
            <span class="badge badge-danger">0%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>

            </div>
          </td>
          <td>
            <span class="badge badge-danger">0%</span>
            <div class="container_info">
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 1</p>
                </div>
                <div class="col-6"></div>
              </div>
              <div class="row no-gutters">
                <div class="col-6 border-right border-azul">
                  <p class="mb-0">Concorrente 2</p>
                </div>
                <div class="col-6"></div>
              </div>

            </div>
          </td>

        </tr>

      </tbody>
    </table>
  </div>


</div>

4
  • Minha questão é diferente. O autor dessa questão queria apenas fixar a primeira linha, eu preciso fixar a primeira coluna e o header inteiro. Eu consigo fazer um ou outro, mas nunca os dois ao mesmo tempo. Commented 17/09/2019 às 19:09
  • 1
    Essa responde a pergunta pt.stackoverflow.com/questions/395577/…
    – hugocsl
    Commented 17/09/2019 às 19:29
  • 1
    Isso funcionou para mim. Obrigado! Commented 18/09/2019 às 13:35
  • Matheus se te ajudou Curte lá :) 🔺 💪
    – hugocsl
    Commented 18/09/2019 às 13:39

0

Pesquise outras perguntas com a tag .