Freeze table first two column
First, I don't recommend you to inline your CSS
like that.
You're unnecessarily repeating yourself hundreds of time.
You said "I have used inline css because that's not the final version" but that is not a valid reason. It's going to be much harder for you to refactor all your code the longer you wait.
There is a great article you should read about this matter: A short guide on when and when not to use inline CSS styles in HTML (Inline Styles in HTML on Code Academy)
Also, you really should learn more about CSS Frameworks
, looks like you would love them, check: Tailwind, Bootstrap, ... Here an article that lists the best CSS Frameworks in 2021 (on Dev To)
Second, the CSS property you're looking for is position: sticky
: Sticky Positioning on MDN
Here is a snippet (note that I didn't inline the style, I have added some classes
on the sticky
elements)
To make everything more dynamic you could even make the vertical scolling header sticky as well.
.sticky{
position: sticky;
left: 0;
background: white;
}
.sticky_two{
position: sticky;
background: white;
left: 79.78px ; /* width of first element + spacing */
}
.th{
background: rgb(22, 50, 92);
}
<table class="Fixed" border="1" width="auto;" style="table-layout:fixed">
<tr style="background: rgb(22, 50, 92);">
<th rowspan="2" colspan="2" style="color:#FFFFFF;width: 18%;text-align: center;" class="sticky th">Activity and indicator description</th>
<th style="color:#FFFFFF;width: 5%;text-align: center;"></th>
<th style="color:#FFFFFF;width: 7%;text-align: center;" colspan="2">FY2021</th>
<th style="color:#FFFFFF;width: 25%;text-align: center;" colspan="8">FY2022</th>
<th style="color:#FFFFFF;width: 25%;text-align: center;" colspan="8">FY2023</th>
<th style="color:#FFFFFF;width: 25%;text-align: center;" colspan="8">FY2024</th>
<th style="color:#FFFFFF;width: 7%;text-align: center;" colspan="2">Cumulative</th>
</tr>
<tr style="background: rgb(22, 50, 92);">
<td style="color:#FFFFFF;text-align: center;"></td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 4</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 1</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 2</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 3</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 4</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 1</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 2</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 3</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 4</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 1</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 2</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 3</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2">Qtr 4</td>
<td style="color:#FFFFFF;text-align: center;" colspan="2"> Life of project</td>
</tr>
<tr style="background: rgb(22, 50, 92);">
<td style="color:#FFFFFF;text-align: center;" class="sticky th">Activity</td>
<td style="color:#FFFFFF;text-align: center;" class="sticky_two th">Indicator</td>
<td style="color:#FFFFFF;text-align: center;">Baseline</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
<td style="color:#FFFFFF;text-align: center;">Target</td>
<td style="color:#FFFFFF;text-align: center;">Actual</td>
</tr>
<tr>
<th class="sticky" style="font-style: italic;">Project Objective 1: Identify and support nascent and grassroots CSOs, activists, and community networks in Latin America and the Caribbean. </th>
</tr>
<tr>
<td class="sticky">1.1: Identify grassroots CSOs, activists, and community networks throughout the LAC region.</td>
<td class="sticky_two">1.1.1: Number of new actors (organizations and individuals) across the region identified</td>
<td style="text-align: center;">-</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">50</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">50</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">50</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">150</td>
<td style="text-align: center;">0</td>
</tr>
<tr>
<td class="sticky" rowspan="2">1.2: Conduct annual virtual Innovation Labs.</td>
<td class="sticky_two" >1.2.1: Number of individuals or organizations selected to participate in innovation labs </td>
<td style="text-align: center;">-</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">50</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">50</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">50</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">150</td>
<td style="text-align: center;">0</td>
</tr>
</table>