Issue
I trying to make the header of this table(.control-products-table) move when I move beyound the header. But not happening, what do I missing? It should work but I thinking that I forgetting something
I already search for an answer, and looks like that I made. please help!!
https://dontpad.com/my/not/working/table
in the above link I put the code of the page.
Solution
Do not use overflow in the parent of the sticky element
You must remove overflow-auto
from the parent div
for the table
.
The sticky positioning might not work if any parent element of the sticky element has an overflow property (like
overflow: hidden
,overflow: scroll
, oroverflow: auto
) set on it.
You can read more about dealing with overflow and position sticky.
Also, set a z-index
to the sticky header to allow the header to come in front of other elements when scrolling.
thead > tr > th {
position: sticky;
top: 0;
z-index: 100;
}
This can be the table:
#content-container {
padding-top: 55px;
}
.control-products-table {
font-size: 10px;
position: relative;
}
.give-space {
height: 10px;
background-color: #0d6efd;
margin: 20px 0px;
border-radius: 10px;
}
.col-tanque,
.col-jacarepagua,
.col-vila,
.col-grajau,
.col-catete,
.col-pechincha,
.col-tijuca {
border-right: 1px solid;
border-right-color: #0d6efd;
text-align: center;
}
.control-products-table td:last-child,
.control-products-table th:last-child {
border-right: none;
}
.col-product {
min-width: 200px;
}
.col-request {
background-color: #d3d3d3!important;
--bs-table-bg-type: none!important;
}
.row {
margin-top: 5px;
margin-bottom: 5px;
}
.col-form {
background-color: #d3d3d3;
border: 1px solid #d3d3d3;
border-radius: 5px;
}
#form-buttons {
margin-top: 5px;
margin-bottom: 5px;
}
.product-removed-alert {
padding: 0.4rem;
margin-bottom: 0;
font-size: 12px;
font-weight: bold;
}
#request-products-table {
font-size: 12px;
}
thead>tr>th {
position: -webkit-sticky;
/* Safari */
position: sticky;
top: 0;
z-index: 100;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<body>
<div class="row">
<div class="col">
<table class="table table-hover table-striped control-products-table">
<thead class="sticky-table-header">
<tr>
<th class="col-product"></th>
<th colspan="4" class="col-tanque">Tanque</th>
<th colspan="4" class="col-jacarepagua">Jacarepagua</th>
<th colspan="4" class="col-vila">Vila</th>
<th colspan="4" class="col-grajau">Grajau</th>
<th colspan="4" class="col-catete">Catete</th>
<th colspan="4" class="col-pechincha">Pechincha</th>
<th colspan="4" class="col-tijuca">Tijuca</th>
</tr>
<tr>
<th class="col-product">Produto</th>
<th>Estoque</th>
<th>Venda</th>
<th>Dias</th>
<th class="col-tanque">Pedido</th>
<th>Estoque</th>
<th>Venda</th>
<th>Dias</th>
<th class="col-jacarepagua">Pedido</th>
<th>Estoque</th>
<th>Venda</th>
<th>Dias</th>
<th class="col-vila">Pedido</th>
<th>Estoque</th>
<th>Venda</th>
<th>Dias</th>
<th class="col-grajau">Pedido</th>
<th>Estoque</th>
<th>Venda</th>
<th>Dias</th>
<th class="col-catete">Pedido</th>
<th>Estoque</th>
<th>Venda</th>
<th>Dias</th>
<th class="col-pechincha">Pedido</th>
<th>Estoque</th>
<th>Venda</th>
<th>Dias</th>
<th class="col-tijuca">Pedido</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-product">100 PS SUPLEMENTO VITAMINICO PASSAROS 10GR</td>
<td class="col-tanque">1.0</td>
<td class="col-tanque">1.0</td>
<td class="col-tanque">45</td>
<td class="col-tanque col-request">1</td>
<td class="col-jacarepagua">0.0</td>
<td class="col-jacarepagua">1.0</td>
<td class="col-jacarepagua">0</td>
<td class="col-jacarepagua col-request">1</td>
<td class="col-vila">0.0</td>
<td class="col-vila">1.0</td>
<td class="col-vila">0</td>
<td class="col-vila col-request">1</td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau col-request"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete col-request"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha col-request"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca col-request"></td>
</tr>
<tr>
<td class="col-product">ADITIVO ANTIODOR PIPICAT BACTERICIDA 500G</td>
<td class="col-tanque">1.0</td>
<td class="col-tanque">1.0</td>
<td class="col-tanque">45</td>
<td class="col-tanque col-request">1</td>
<td class="col-jacarepagua">0.0</td>
<td class="col-jacarepagua">1.0</td>
<td class="col-jacarepagua">0</td>
<td class="col-jacarepagua col-request">1</td>
<td class="col-vila">0.0</td>
<td class="col-vila">1.0</td>
<td class="col-vila">0</td>
<td class="col-vila col-request">1</td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau col-request"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete col-request"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha col-request"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca col-request"></td>
</tr>
<tr>
<td class="col-product">ADITIVO ANTIODOR PIPICAT CAMPESTRE 500G</td>
<td class="col-tanque">2.0</td>
<td class="col-tanque">2.0</td>
<td class="col-tanque">45</td>
<td class="col-tanque col-request">2</td>
<td class="col-jacarepagua">0.0</td>
<td class="col-jacarepagua">2.0</td>
<td class="col-jacarepagua">0</td>
<td class="col-jacarepagua col-request">2</td>
<td class="col-vila">0.0</td>
<td class="col-vila">2.0</td>
<td class="col-vila">0</td>
<td class="col-vila col-request">2</td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau col-request"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete col-request"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha col-request"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca col-request"></td>
</tr>
<tr>
<td class="col-product">ADITIVO ANTIODOR PIPICAT FLORAL 500G</td>
<td class="col-tanque">2.0</td>
<td class="col-tanque">2.0</td>
<td class="col-tanque">45</td>
<td class="col-tanque col-request">2</td>
<td class="col-jacarepagua">0.0</td>
<td class="col-jacarepagua">2.0</td>
<td class="col-jacarepagua">0</td>
<td class="col-jacarepagua col-request">2</td>
<td class="col-vila">0.0</td>
<td class="col-vila">2.0</td>
<td class="col-vila">0</td>
<td class="col-vila col-request">2</td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau col-request"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete col-request"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha col-request"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca col-request"></td>
</tr>
<tr>
<td class="col-product">ADVOCATE COMBO CAO 3 PIPETAS 10-25KG - 2.5ML</td>
<td class="col-tanque">1.0</td>
<td class="col-tanque">1.0</td>
<td class="col-tanque">45</td>
<td class="col-tanque col-request">1</td>
<td class="col-jacarepagua">0.0</td>
<td class="col-jacarepagua">1.0</td>
<td class="col-jacarepagua">0</td>
<td class="col-jacarepagua col-request">1</td>
<td class="col-vila">0.0</td>
<td class="col-vila">1.0</td>
<td class="col-vila">0</td>
<td class="col-vila col-request">1</td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau col-request"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete col-request"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha col-request"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca col-request"></td>
</tr>
<tr>
<td class="col-product">ADVOCATE COMBO CAO 3 PIPETAS 25-40KG - 4ML</td>
<td class="col-tanque">1.0</td>
<td class="col-tanque">1.0</td>
<td class="col-tanque">45</td>
<td class="col-tanque col-request">1</td>
<td class="col-jacarepagua">0.0</td>
<td class="col-jacarepagua">1.0</td>
<td class="col-jacarepagua">0</td>
<td class="col-jacarepagua col-request">1</td>
<td class="col-vila">0.0</td>
<td class="col-vila">1.0</td>
<td class="col-vila">0</td>
<td class="col-vila col-request">1</td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau col-request"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete col-request"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha col-request"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca col-request"></td>
</tr>
<tr>
<td class="col-product">ADVOCATE COMBO CAO 3 PIPETAS 4-10KG - 1ML</td>
<td class="col-tanque">0.0</td>
<td class="col-tanque">0.0</td>
<td class="col-tanque">0</td>
<td class="col-tanque col-request">0</td>
<td class="col-jacarepagua">0.0</td>
<td class="col-jacarepagua">0.0</td>
<td class="col-jacarepagua">0</td>
<td class="col-jacarepagua col-request">0</td>
<td class="col-vila">0.0</td>
<td class="col-vila">0.0</td>
<td class="col-vila">0</td>
<td class="col-vila col-request">0</td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau col-request"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete col-request"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha col-request"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca col-request"></td>
</tr>
<tr>
<td class="col-product">ADVOCATE COMBO CAO 3 PIPETAS ATE 4KG - 0.4ML</td>
<td class="col-tanque">0.0</td>
<td class="col-tanque">0.0</td>
<td class="col-tanque">0</td>
<td class="col-tanque col-request">0</td>
<td class="col-jacarepagua">0.0</td>
<td class="col-jacarepagua">0.0</td>
<td class="col-jacarepagua">0</td>
<td class="col-jacarepagua col-request">0</td>
<td class="col-vila">0.0</td>
<td class="col-vila">0.0</td>
<td class="col-vila">0</td>
<td class="col-vila col-request">0</td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau col-request"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete col-request"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha col-request"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca col-request"></td>
</tr>
<tr>
<td class="col-product">ADVOCATE COMBO GATO 3 PIPETAS 4-8KG - 0.8ML</td>
<td class="col-tanque">3.0</td>
<td class="col-tanque">3.0</td>
<td class="col-tanque">45</td>
<td class="col-tanque col-request">3</td>
<td class="col-jacarepagua">0.0</td>
<td class="col-jacarepagua">3.0</td>
<td class="col-jacarepagua">0</td>
<td class="col-jacarepagua col-request">3</td>
<td class="col-vila">0.0</td>
<td class="col-vila">3.0</td>
<td class="col-vila">0</td>
<td class="col-vila col-request">3</td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau col-request"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete col-request"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha col-request"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca col-request"></td>
</tr>
<tr>
<td class="col-product">ADVOCATE COMBO GATO 3 PIPETAS ATE 4KG - 0.4ML</td>
<td class="col-tanque">2.0</td>
<td class="col-tanque">2.0</td>
<td class="col-tanque">45</td>
<td class="col-tanque col-request">2</td>
<td class="col-jacarepagua">0.0</td>
<td class="col-jacarepagua">2.0</td>
<td class="col-jacarepagua">0</td>
<td class="col-jacarepagua col-request">2</td>
<td class="col-vila">0.0</td>
<td class="col-vila">2.0</td>
<td class="col-vila">0</td>
<td class="col-vila col-request">2</td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau col-request"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete col-request"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha col-request"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca col-request"></td>
</tr>
<tr>
<td class="col-product">AFASTEPET FORTE 150ML</td>
<td class="col-tanque">2.0</td>
<td class="col-tanque">2.0</td>
<td class="col-tanque">45</td>
<td class="col-tanque col-request">2</td>
<td class="col-jacarepagua">0.0</td>
<td class="col-jacarepagua">2.0</td>
<td class="col-jacarepagua">0</td>
<td class="col-jacarepagua col-request">2</td>
<td class="col-vila">0.0</td>
<td class="col-vila">2.0</td>
<td class="col-vila">0</td>
<td class="col-vila col-request">2</td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau col-request"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete col-request"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha col-request"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca col-request"></td>
</tr>
<tr>
<td class="col-product">AFASTEPET FORTE 500ML</td>
<td class="col-tanque">1.0</td>
<td class="col-tanque">1.0</td>
<td class="col-tanque">45</td>
<td class="col-tanque col-request">1</td>
<td class="col-jacarepagua">0.0</td>
<td class="col-jacarepagua">1.0</td>
<td class="col-jacarepagua">0</td>
<td class="col-jacarepagua col-request">1</td>
<td class="col-vila">0.0</td>
<td class="col-vila">1.0</td>
<td class="col-vila">0</td>
<td class="col-vila col-request">1</td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau"></td>
<td class="col-grajau col-request"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete"></td>
<td class="col-catete col-request"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha"></td>
<td class="col-pechincha col-request"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca"></td>
<td class="col-tijuca col-request"></td>
</tr>
</tbody>
</table>
</div>
</div>
Using position sticky with overflow workaround
If, in any case, you need to stick with your solution and have both overflow and position sticky, you can add a fixed height to your overflowing element like 80vh
and make it work, but keep in mind it does not work everywhere and in every situation.
It will be something like:
HTML:
<div class="col overflow-auto parent">
...
</div>
CSS:
.parent {
height: 80vh;
}
As per your last request for making the first column sticky. You can do the same thing as the table header.
.control-products-table th.col-product,
.control-products-table td.col-product {
position: sticky;
left: 0;
}
/* To keep your table consistent and allow the right element to come over other when scrolling */
.control-products-table th.col-product {
z-index: 101;
}
.control-products-table td.col-product {
z-index: 99;
}
NOTE: Keep in mind it's always best to just post your code abstractions to let other users identify issues within your code more easily.
Answered By - SMAKSS
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.