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>