Half Sticky Table with Html and Css - html

Question

I have a table like in the picture:
What I am trying to achieve is I want the total part sticky on the table and Math, History and Biology etc. should be able to scroll right. S now the Math is next to the Total but I want History or Biology should be able to next to Total also.
Until now my code is like this:
.last-workouts .last-workout-table {
border-radius: 20px;
}
.last-workouts table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
.last-workouts table .tests:not(:last-child) {
border-bottom: 1px solid #050a6c;
}
.last-workouts .test {
background-color: #00bad6;
text-align: center;
color: #FFFFFF;
padding: 1rem 0;
width: 20%;
}
.last-workouts .test .number-test,
.last-workouts .test .type-test {
font-weight: bold;
}
.last-workouts .result {
margin: 0;
padding: 0;
text-align: center;
width: 12%;
background-color: #F0F0F0;
}
.last-workouts .inner-table {
border: none;
}
.last-workouts .inner-table tr:not(:last-child) {
border-bottom: 1px solid #a9a9a9;
}
.last-workouts .total {
color: #00bad6;
font-weight: bold;
padding: .25rem;
}
.last-workouts .inner-table .box td {
padding: 0.5rem;
border: 1px solid #a9a9a9;
}
.last-workouts .inner-table .box .bold {
font-weight: bold;
}
.last-workouts .inner-table .box .bold.red {
color: red;
}
.last-workouts .inner-table .box div {
padding: .5rem;
}
.last-workouts .lessons {
margin: 0;
padding: 0;
text-align: center;
width: 12%;
}
.last-workouts .lessons:not(:last-child) {
border-right: 2px solid #000000;
}
<div class="last-workouts">
<div style="overflow-x:auto;" class="last-workout-table">
<table>
<tr class="tests">
<td class="test">
<div class="number-test">TYT-1</div>
<div class="type-test">Genel Deneme</div>
<div class="date">30.08.2021</div>
</td>
<td class="result">
<div class="total">
Toplam
</div>
<table class="inner-table">
<tr class="box">
<td>S</td>
<td>D</td>
<td>Y</td>
<td>B</td>
<td class="bold">Net</td>
<td class="bold">Puan</td>
</tr>
<tr class="box">
<td>115</td>
<td>80</td>
<td>6</td>
<td>16</td>
<td class="bold red">17.48</td>
<td class="bold red">490,54</td>
</tr>
</table>
</td>
<td class="lessons">
<div class="total">
Matematik
</div>
<table class="inner-table">
<tr class="box">
<td>S</td>
<td>D</td>
<td>Y</td>
<td>B</td>
<td class="bold">Net</td>
<td class="bold">Puan</td>
</tr>
<tr class="box">
<td>115</td>
<td>80</td>
<td>6</td>
<td>16</td>
<td class="bold red">17.48</td>
<td class="bold red">490,54</td>
</tr>
</table>
</td>
<td class="lessons">
<div class="total">
Turkce
</div>
<table class="inner-table">
<tr class="box">
<td>S</td>
<td>D</td>
<td>Y</td>
<td>B</td>
<td class="bold">Net</td>
<td class="bold">Puan</td>
</tr>
<tr class="box">
<td>115</td>
<td>80</td>
<td>6</td>
<td>16</td>
<td class="bold red">17.48</td>
<td class="bold red">490,54</td>
</tr>
</table>
</td>
<td class="lessons">
<div class="total">
Tarih
</div>
<table class="inner-table">
<tr class="box">
<td>S</td>
<td>D</td>
<td>Y</td>
<td>B</td>
<td class="bold">Net</td>
<td class="bold">Puan</td>
</tr>
<tr class="box">
<td>115</td>
<td>80</td>
<td>6</td>
<td>16</td>
<td class="bold red">17.48</td>
<td class="bold red">490,54</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
So how do you think I can achieve this?
Thanks

Answer 1

Nest .test and .result in an inner table and add position: sticky; left: 0; to the outer td.
.last-workouts .last-workout-table {
border-radius: 20px;
}
.last-workouts table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
.last-workouts table .tests:not(:last-child) {
border-bottom: 1px solid #050a6c;
}
.last-workouts .test {
background-color: #00bad6;
text-align: center;
color: #FFFFFF;
padding: 1rem 0;
width: 20%;
}
.last-workouts .test .number-test,
.last-workouts .test .type-test {
font-weight: bold;
}
.last-workouts .result {
margin: 0;
padding: 0;
text-align: center;
width: 12%;
background-color: #F0F0F0;
}
.last-workouts .inner-table {
border: none;
}
.last-workouts .inner-table tr:not(:last-child) {
border-bottom: 1px solid #a9a9a9;
}
.last-workouts .total {
color: #00bad6;
font-weight: bold;
padding: .25rem;
}
.last-workouts .inner-table .box td {
padding: 0.5rem;
border: 1px solid #a9a9a9;
}
.last-workouts .inner-table .box .bold {
font-weight: bold;
}
.last-workouts .inner-table .box .bold.red {
color: red;
}
.last-workouts .inner-table .box div {
padding: .5rem;
}
.last-workouts .lessons {
margin: 0;
padding: 0;
text-align: center;
width: 12%;
}
.last-workouts .lessons:not(:last-child) {
border-right: 2px solid #000000;
}
<div class="last-workouts">
<div style="overflow-x:auto;" class="last-workout-table">
<table>
<tr class="tests">
<td style="position: sticky; left: 0;">
<table>
<td class="test">
<div class="number-test">TYT-1</div>
<div class="type-test">Genel Deneme</div>
<div class="date">30.08.2021</div>
</td>
<td class="result">
<div class="total">
Toplam
</div>
<table class="inner-table">
<tr class="box">
<td>S</td>
<td>D</td>
<td>Y</td>
<td>B</td>
<td class="bold">Net</td>
<td class="bold">Puan</td>
</tr>
<tr class="box">
<td>115</td>
<td>80</td>
<td>6</td>
<td>16</td>
<td class="bold red">17.48</td>
<td class="bold red">490,54</td>
</tr>
</table>
</td>
</table>
</td>
<td class="lessons">
<div class="total">
Matematik
</div>
<table class="inner-table">
<tr class="box">
<td>S</td>
<td>D</td>
<td>Y</td>
<td>B</td>
<td class="bold">Net</td>
<td class="bold">Puan</td>
</tr>
<tr class="box">
<td>115</td>
<td>80</td>
<td>6</td>
<td>16</td>
<td class="bold red">17.48</td>
<td class="bold red">490,54</td>
</tr>
</table>
</td>
<td class="lessons">
<div class="total">
Turkce
</div>
<table class="inner-table">
<tr class="box">
<td>S</td>
<td>D</td>
<td>Y</td>
<td>B</td>
<td class="bold">Net</td>
<td class="bold">Puan</td>
</tr>
<tr class="box">
<td>115</td>
<td>80</td>
<td>6</td>
<td>16</td>
<td class="bold red">17.48</td>
<td class="bold red">490,54</td>
</tr>
</table>
</td>
<td class="lessons">
<div class="total">
Tarih
</div>
<table class="inner-table">
<tr class="box">
<td>S</td>
<td>D</td>
<td>Y</td>
<td>B</td>
<td class="bold">Net</td>
<td class="bold">Puan</td>
</tr>
<tr class="box">
<td>115</td>
<td>80</td>
<td>6</td>
<td>16</td>
<td class="bold red">17.48</td>
<td class="bold red">490,54</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>