我想要一个扩展表（左->右），但第一列固定 [重复]
Posted
技术标签:
【中文标题】我想要一个扩展表（左->右），但第一列固定 [重复]【英文标题】：I want an extensive table (left->right) but with the first column fixed [duplicate] 【发布时间】：2020-02-03 11:18:08 【问题描述】：我正在创建一个“甘特图”样式的表格，所以这意味着它必须固定第一列，并且它可以是一个很长的表格，从左到右。
我尝试过： 1.使用简单的html； 2. 使用 DIV 和 CSS； 3.使用TH和CSS； 目前没有好结果
div 是最接近的，但第一列溢出，表格不再对齐。
<table >
<tr>
<th > </th>
<td colspan='14'>2019</td>
</tr>
<tr><th>  </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 的情况下）
【问题讨论】：
你必须展示你的代码以使问题更容易理解 我认为没有纯 CSS 解决方案。但是在这种情况下，表格元素本身就更不可能使用了。有修复列标题的解决方案，因为它本身就是一个元素（如这里：codepen.io/tjvantoll/pen/JEKIu），但行标题分布在多行中。 【参考方案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>【讨论】：
以上是关于我想要一个扩展表（左->右），但第一列固定 [重复]的主要内容，如果未能解决你的问题，请参考以下文章