Implement Word freeze functionality in HTML table - html

Question

As I am a beginner in designing and have not much idea about CSS manipulating so need some help.
I have one HTML page and want to implement the same functionality of freeze as we are using in Word.
Here I am having the table and want to freeze the first 4 columns so it doesn't move and stay sticky and the last column to show the total and only allow in between columns to move with scrolling bar.
NOTE: The table is dynamic and rows and columns will be dynamic. Here is my code [https://jsfiddle.net/padhiyarmahavirsinh/b51k20sr/3/][2]

Answer 1

The basic idea is to make two tables, give one a fixed height and add a scroll bar. You're gonna have to tweak it for your site
//not part of styling, just to get the total
const total = document.querySelector("table:last-of-type tr td:last-child");
const money = document.querySelectorAll("table:first-of-type tr td:last-child");
let sum = 0;
money.forEach(({
innerText
}) => {
sum += parseInt(innerText);
});
total.innerText = sum;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
border-collapse: collapse;
width: 125px;
display: flex;
overflow: hidden;
}
table:first-of-type {
height: 150px;
overflow-y: scroll;
}
td,
th {
border: 1px solid grey;
text-align: center;
}
td {
height: 40px;
width: 50px;
}
<table>
<tr>
<th>name</th>
<th>money</th>
</tr>
<tr>
<td>a</td>
<td>7923</td>
</tr>
<tr>
<td>b</td>
<td>7981</td>
</tr>
<tr>
<td>c</td>
<td>3724</td>
</tr>
<tr>
<td>d</td>
<td>4234</td>
</tr>
<tr>
<td>e</td>
<td>12939</td>
</tr>
<tr>
<td>f</td>
<td>3247</td>
</tr>
<tr>
<td>g</td>
<td>5798</td>
</tr>
<tr>
<td>h</td>
<td>5324</td>
</tr>
</table>
<table>
<tr>
<td>total</td>
<td>0</td>
</tr>
</table>