我想要一个扩展表（左->右），但第一列固定 [重复]

Question

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

我尝试过： 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>

我希望看到一个简单的表格，但我无法同时满足这三个结果： * 从左到右很长； * 第一列始终可见； * 没有文本溢出（在使用 div 的情况下）

Answer 1

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

.chart {
  position: relative;
  
/*   simulate horizontal scrolling, to remove */
  width: 700px;
}

.chart-wrapper {
  display: flex;
  
  overflow-x: scroll;
}

.header-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  overflow-x: scroll;
  
  z-index: -1;
}

.data-container {
  display: flex;
  
  pointer-events: none;
}

.header, .header-spacing {
  flex-shrink: 0;
  
  display: flex;
  flex-direction: column;
  
  font-weight: bold;
  text-align: center;
}

.header {
  position: absolute;
  top: 0;
  bottom: 0;
  
  z-index: 1;
  
  background: white;
}

.header-spacing {
  visibility: hidden;
}

.data {  
  z-index: -2;
}

.row {
  display: flex;
  
  width: 100%
}

.row > div, .header > div {
  flex-grow: 1;
  
  min-width: 50px;
  
  margin: 1px;
}

<div class="chart">
  <div class="chart-wrapper">
    <div class="header-container">
      <div class="header">
          <div> Department - Team</div>
          <div>Corporate Development - Fundraisin </div>
          <div>Corporate Development - Marketing </div>
          <div>FAS - Team A </div>
          <div>BF Server - Server . </div>
      </div>
    </div>
    <div class="data-container">
        <div class="header-spacing">
            <div> Department - Team</div>
            <div>Corporate Development - Fundraisin </div>
            <div>Corporate Development - Marketing </div>
            <div>FAS - Team A </div>
            <div>BF Server - Server . </div>
        </div>
        <div class="data">
            <div class="row">
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
                <div>11</div>
                <div>12</div>
                <div>13</div>
                <div>14</div>
                <div>15</div>
                <div>16</div>
                <div>17</div>
            </div>
            <div class="row">
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
                <div style="background-color:#FFAAAA;">7.67</div>
            </div>
            <div class="row">
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
                <div style="background-color:#AAAAFF;">1.25</div>
            </div>
            <div class="row">
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAAAA;">10.00</div>
                <div style="background-color:#FFAA14;">5.00</div>
                <div style="background-color:#FFAA14;">5.00</div>
                <div style="background-color:#FFAA14;">5.00</div>
            </div>
            <div class="row">
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#FFAA14;">4.75</div>
                <div style="background-color:#AAAAFF;">1.75</div>
                <div style="background-color:#AAAAFF;">1.75</div>
                <div style="background-color:#AAAAFF;">1.75</div>
            </div>
        </div>
    </div>
  </div>
</div>