I have a table with bit complicated structure as it has has colspan with multiple headers. I need to fix my table first two column and rest should be scrollable horizontally. I tried various examples to freeze column but does not work as expected. Below are the links that I referred.
I want everything to be fixed under Activity and indicator description header
<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;">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;">Activity</td>
<td style="color:#FFFFFF;text-align: center;">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 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>1.1: Identify grassroots CSOs, activists, and community networks throughout the LAC region.</td>
<td>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 rowspan="2">1.2: Conduct annual virtual Innovation Labs.</td>
<td>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>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>