I've come across several similar posts, but none seem to address my particular dilemma.
My challenge lies in presenting a table at the end of a bootstrap grid:
<div class="container-fluid">
<!-- Various rows with different sizes above -->
<div class="row">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Size (byte)</th>
<th>Loaded</th>
</tr>
</thead>
<tbody>
@foreach (var file in _filesToUpload)
{
<tr>
<td>@file.Name</td>
<td>@file.FileType</td>
<td>@file.FileSize</td>
<td>@file.Loaded.ToString()</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
The accompanying css is as follows:
.table {
color: white;
background-color: rgba(0, 0.941, 0, 0.5);
}
.table-responsive {
height: 40rem;
overflow: auto;
}
thead tr:nth-child(1) th {
background-color: black;
position: sticky;
top: 0;
z-index: 10;
}
This whole setup exists within a .page container and a main container per the default Blazor project configuration:
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4 auth">
<LoginDisplay />
</div>
<div class="content px-4">
@Body <!-- this is where the code above gets inserted -->
</div>
</div>
</div>
Lastly, I have tailored some css for the page and main classes:
.page {
position: relative;
display: flex;
flex-direction: column;
height: 100vh;
overflow: auto;
background-color: transparent;
}
.main {
flex: 1;
background-image: url(../web/wallpaper.jpg);
background-repeat: no-repeat;
background-position: top 0 right 0;
background-size: cover;
background-attachment: fixed;
}
My objective is to maintain a fixed background while allowing content exceeding the screen size to be scrollable. Presently, the solution eludes me despite attempts to dynamically adjust the table-responsive class height. Any guidance on achieving this feat would be greatly appreciated.