冻结 table 前两列

Question

我有一个结构有点复杂的 table，因为它有多个 header 的 colspan。我需要修复我的 table 前两列，其余列应该可以水平滚动。我尝试了各种示例来冻结列，但没有按预期工作。以下是我引用的链接。

我希望在 Activity 和指标描述 header

下修复所有问题

Nested table: Freeze first column
How do I create an HTML table with a fixed/frozen left column and a scrollable body?

<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>

Answer 1

首先，我不建议您像那样内联 CSS。你不必要地重复自己数百次。

您说“我使用内联 css 因为那不是最终版本”，但这不是一个正当理由。等待的时间越长，重构所有代码就越困难。

关于这个问题，您应该阅读一篇很棒的文章：A short guide on when and when not to use inline CSS styles in HTML (Inline Styles in HTML on Code Academy)

此外，你真的应该多了解一下 CSS Frameworks，看来你会喜欢它们，请查看：Tailwind, Bootstrap, ... Here an article that lists the best CSS Frameworks in 2021 (on Dev To)

其次，您要找的CSS属性是position: sticky：Sticky Positioning on MDN

这是一个片段（请注意，我没有内联样式，我在 sticky 元素上添加了一些 classes）

为了让一切都更有活力，你甚至可以让垂直滚动 header 也有粘性。

.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>

Answer 2

应该这样做：

将 <table class="Fixed" border="1" width="auto;" style="table-layout:fixed"> 更改为 <table class="Fixed">（属性将移动到样式表）
在第 1 至第 3 <tr> 的周围添加 <thead> ... </thead>
在倒数第 4 个左右添加 <tbody> ... </tbody> <tr> 个
现在可以将 <thead> 部分设置为粘性，以便在向下滚动时保持不变
为此，添加一个小样式表，例如：

_

table.Fixed         { table-layout:fixed; width: auto; margin: 0; padding: 0; }
table.Fixed thead   { position: sticky; top: 0; }
table.Fixed, 
table.Fixed th, 
table.Fixed td      { border-collapse: collapse; border: 1px solid rgb(22, 50, 92); }

结果：

<!DOCTYPE html>
<html>
  <head>
  <style>
body                { margin: 0; padding: 0; }
table.Fixed         { table-layout:fixed; width: auto; margin: 0; padding: 0; }
table.Fixed thead   { position: sticky; top: 0; }
table.Fixed, 
table.Fixed th, 
table.Fixed td      { border-collapse: collapse; border: 1px solid rgb(22, 50, 92); }
  </style>
  </head>
  <body>
<table class="Fixed">
  <thead>
    <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>
  </thead>
  <tbody>
    <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>

    <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>

    <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>

    <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>

    <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>

    <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>

    <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>

    <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>

    <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>

    <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>

    <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>


  </tbody>
</table>
  </body>
</html>

冻结 table 前两列

Freeze table first two column

html

css

html-table