Html 我想要一个扩展表（左->；右），但第一列是固定的

我正在创建一个“甘特图”样式的表，这意味着它必须固定第一列，并且它可以是一个非常长的表，从左到右

我曾尝试： 1.使用简单的HTML； 2.使用div和CSS； 3.使用TH和CSS； 到目前为止没有好结果

div是最近的一个，但第一列溢出，表不再对齐

<table >
        <tr>
            <th > &nbsp;</th>

            <td colspan='14'>2019</td>
        </tr>
        <tr><th>&nbsp </th>
            <td colspan='14'>9</td>
        </tr>
        <tr><th> Department - Team</th>
            <td style='width:30px;'>4</td>
            <td style='width:30px;'>5</td>
            <td style='width:30px;'>6</td>
            <td style='width:30px;'>7</td>
            <td style='width:30px;'>8</td>
            <td style='width:30px;'>9</td>
            <td style='width:30px;'>10</td>
            <td style='width:30px;'>11</td>
            <td style='width:30px;'>12</td>
            <td style='width:30px;'>13</td>
            <td style='width:30px;'>14</td>
            <td style='width:30px;'>15</td>
            <td style='width:30px;'>16</td>
            <td style='width:30px;'>17</td></tr>
<tr>
    <th >Corporate Development - Fundraisin </th>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td>
    <td style='width:30px;background-color:#FFAAAA;'>7.67</td></tr>
<tr>
    <th >Corporate Development - Marketing </th>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.25</td></tr>
<tr>
    <th >FAS - Team A </th>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAAAA;'>10.00</td>
    <td style='width:30px;background-color:#FFAA14;'>5.00</td>
    <td style='width:30px;background-color:#FFAA14;'>5.00</td>
    <td style='width:30px;background-color:#FFAA14;'>5.00</td></tr>
<tr>
    <th >BF Server - Server . </th>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#FFAA14;'>4.75</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.75</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.75</td>
    <td style='width:30px;background-color:#AAAAFF;'>1.75</td>

</tr>

2019
 
9
部门小组
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
企业发展-筹款
7.67
7.67
7.67
7.67
7.67
7.67
7.67
7.67
7.67
7.67
7.67
7.67
7.67
7.67
企业发展-市场营销
1.25
1.25
1.25
1.25
1.25
1.25
1.25
1.25
1.25
1.25
1.25
1.25
1.25
1.25
FAS-A队
10
10
10
10
10
10
10
10
10
10
10
5
5
5
BF服务器-服务器。
4.75
4.75
4.75
4.75
4.75
4.75
4.75
4.75
4.75
4.75
4.75
1.75
1.75
1.75

我希望看到一个简单的表格，但我不能同时满足这三个结果： *从左到右很长； *第一列始终可见；

---

*没有文本溢出（在使用divs的情况下）

某种解决方案，但我很失望无法选择标题。
我的建议的核心是使用标题的不可见副本为固定标题腾出空间，然后使用z-index属性隐藏

标题容器的不可用水平滚动条


.chart{
位置：相对位置；
/*模拟水平滚动，以删除*/
宽度：700px；
}
.图表包装器{
显示器：flex；
溢出-x：滚动；
}
.收割台容器{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
溢出-x：滚动；
z指数：-1；
}
.数据容器{
显示器：flex；
指针事件：无；
}
.页眉，.页眉间距{
弹性收缩：0；
显示器：flex；
弯曲方向：立柱；
字体大小：粗体；
文本对齐：居中；
}
.标题{
位置：绝对位置；
排名：0；
底部：0；
z指数：1；
背景：白色；
}
.收割台间距{
可见性：隐藏；
}
.数据{
z指数：-2；
}
.行{
显示器：flex；
宽度：100%
}
.row>div、.header>div{
柔性生长：1；
最小宽度：50px；
保证金：1px；
}

部门小组
企业发展-筹款
企业发展-市场营销
FAS-A队
BF服务器-服务器。
部门小组
企业发展-筹款
企业发展-市场营销
FAS-A队
BF服务器-服务器。
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
7.67
7.67
7.67
7.67
7.67
7.67
7.67
7.67
7.67
7.67
7.67
7.67
7.67
7.67
1.25
1.25
1.25
1.25
1.25
1.25
1.25
1.25
1.25
1.25
1.25
1.25
1.25
1.25
10
10
10
10
10
10
10
10
10
10
10
5
5
5
4.75
4.75
4.75
4.75
4.75
4.75
4.75
4.75
4.75
4.75
4.75
1.75
1.75
1.75
你必须展示你的代码，让问题更容易理解。我认为没有一个纯粹的css解决方案。但在这种情况下，表元素本身就不太可能可用。有一些解决方案可以修复列标题，因为列标题本身就是一个元素（如下所示），但行标题分布在多行中。