I needed a CSS code for my Asp.Net Core Code that would apply to multiple tables. The desired style should include a fixed table header with a scrollable body, ensuring alignment between rows and columns. Despite trying various alternatives, I couldn't find a suitable solution. The codes I tested either misaligned the header with the columns below or failed to adjust column widths properly.
After some trial and error, I developed this style code:
<style>
* {
box-sizing: border-box;
}
.wrapper2 {
height: 30vw;
overflow-y: scroll;
}
(The rest of the original CSS styling code goes here...)
The HTML View code snippet includes:
<div class="container">
<div class="card level-3">
<h3>Blablabla</h3>
<div class="tablealign">
(Original HTML table content goes here...)
</div>
</div>
</div>
You can view how the table looks on the website through the following links: https://i.sstatic.net/uoSZ5.png https://i.sstatic.net/boAK3.png
Although the current setup works adequately, I am seeking improvements in the width adjustment of the header and column text. When the table is viewed on a mobile device, it appears as follows:
https://i.sstatic.net/DmDyT.png
This presentation on a cellphone is suboptimal. I am open to suggestions on optimizing the code for achieving the desired table layout while ensuring a responsive design. Any assistance would be greatly appreciated. Thank you for your time and willingness to help address this issue.