I am currently working on a solution to keep the header of my table fixed in place without scrolling.
Despite my limited experience with Bootstrap and React, I have tried exploring older threads on Stack Overflow to find a suitable fix for making the header of a scrollable table stay put. However, I feel like I am on the right track but need a more personalized solution for my specific code.
This is how my table looks within a React component:
<div>
<div className="tablediv">
<div className="table-wrapper-scroll-y my-custom-scrollbar">
<table className="table table-hover table-striped table-light">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Date</th>
<th scope="col">Value: USD</th>
</tr>
</thead>
<tbody>
{priceAndDateArray.slice(0).reverse().map((item, i) => (
<tr key={i}>
<th scope="row">{i+1}</th>
<td>{item.date}</td>
<td>{item.price}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
Here is the CSS code relevant to the table:
.tablediv {
flex-wrap: wrap;
align-content: space-evenly;
padding: 5%;
justify-content: center
}
.tablediv tr {
cursor: pointer;
cursor: hand;
}
.my-custom-scrollbar {
position: relative;
height: 400px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
The desired outcome is to have the top header of the table (#, Date, Value: USD) stay fixed in place. However, the current issue is that they are scrolling along with the rest of the table contents.