正文 

当前位置： 首页 > 知识 >

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

     2023-03-05     240

关键词：

【中文标题】我想要一个扩展表（左->右），但第一列固定 [重复]【英文标题】：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 > &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 的情况下）

【问题讨论】：

你必须展示你的代码以使问题更容易理解 我认为没有纯 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>

【讨论】：

具有固定标题和固定第一列的动态 HTML 表

...布时间】：2014-02-2208:00:37【问题描述】：我正在动态创建一个html表格并填写其内容。之后，我将完整的HTML添加到我的aspx页面上已经存在的div中。我想修复动态表的标题及其第一列。到目前为止，我已经尝试过FixedHeader、datatable... 查看详情

如何使用 HTML/CSS 创建第一列固定的表？

...SS?【发布时间】：2017-06-1904:08:13【问题描述】：我想创建一个可以水平滚动的表格。列数是动态的。我想在水平滚动表格时实现第一列需要固定/冻结。我尝试了以下CSS。第一列是固定的，但第二、第三列隐藏在固定列之下。.mydi... 查看详情

如何转换数据框中的所有浮点列，但第一列除外？

...题描述】：我已经搜索过但没有找到我需要的东西。我有一个有50列的数据框。第一个是日期数据类型，其余的是浮点数据类型。现在我只想将浮点列转换为整数，而不是日期列。有人可以指导吗？当我像df_sub1=df 查看详情

向左浮动，最大宽度和流量控制

...布时间】：2014-02-0813:00:01【问题描述】：理想情况下，我想要一个16-30em之间的可变宽度左面板和一个固定在16em宽的右面板。当屏幕缩小到32em或更少时，我希望右侧面板在左侧下方流动。我希望这一切都左对齐。我发现了几个并... 查看详情

HTML表格第一列在水平滚动时固定[重复]

...te]【发布时间】：2020-07-2721:36:41【问题描述】：我创建了一个HTML表格：<tableid="customers"class="tabletable-bordered"><thead><tr><thcol 查看详情

css左固定右自适应常用方法

下面是几种方法的公用部分（右自适应也是一样的，换一下方向）html:<divclass="demo"><divclass="sidebar">我是固定的</div><divclass="content">我是自适应的</div></div>css:.sidebar,.content{height:300px;}.sidebar 查看详情

css样式表中如何设置table的第一列的宽度是固定值。页面中有很多table纵向排列

或者是用js也可以。用js的给所有td添加一个class名字。然后这个名字在让是表中设置了一个宽度也同样可以解决这个问题需要准备的材料分别有：电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件，例如：index.htm... 查看详情

whydidthecowcrosstheroadiiihysbz-4991-cdq-逆序数

 HYSBZ-4991 题意：第一列1-n的排列，第二列1-n的排列。 相同数字连边 ，问 有多少组数字是有交点的并且绝对值之差>K思路：处理一下1-n在第一列的位置，1-n在第二列的位置。按照第一列的位置从小到大排序，... 查看详情

QTableWidget 扩展列以填充最后一列固定宽度

...到这一点。提供的图像展示了我所追求的。它本质上只是一个具有以下行为的QTableWidget：填满可用空间。右侧有一个固定宽度列。我希望能够手动 查看详情

怎样一个表中的2个查询结果合并到一个表中的两列

...以做的到这样吗？可以这样做SELECTCASEWHEN逻辑表达式ATHEN想要显示的值ELSENULLENDAS列名,CASEWHEN逻辑表达式BTHEN想要显示的值ELSENULLENDAS列名FROM表或视图名这样执行之后，第1列不是NULL的就是符合逻辑条件A的，第2列不是NULL的就是符合... 查看详情

熊猫数据框按列位置分组

...nposition【发布时间】：2018-07-1912:14:11【问题描述】：我有一个函数可以在pandas数据帧上进行分组。问题是我的数据框可以有可变数量的列。我想汇总：将最后一列与第一列相加。最后一列的名称不同，但第一列的名称是固定的。... 查看详情

将当前工作簿中的所有工作表复制到新工作簿，但第一张工作表除外

...irstsheet【发布时间】：2020-05-1412:54:01【问题描述】：我有一个基于宏的工作簿，我在其中运行多个进程，所有结果都存储在同一个XLSM工作簿中。我需要将所有输出工作表，即除了工作表（1）之外的所有工作表存储到一个新工作... 查看详情

python：固定长度字符串左/右对齐多个变量(代码片段)

...字符串。我想输出一张格式化的火车出发表显示屏的长度固定为20个字符（20x4）我有3个可变长度的字符串变量（line，station，eta）其中2个应该左对齐（线，站），而第三个应该右对齐例：8:stationA845:longstation101:greatstation25我玩过... 查看详情

如何在表格中创建效果行跨度

...：我需要创建一个表，其中第一列具有特定的rowspan。我想要的结果就像this详细我想要第一列中的所有行在一起。这是代码.html：//Thisrowalltoogetherinonetd<tr*ngFor="letcountoflistCount"> 查看详情

css让表格第一列和第一行固定

...为一行多列的表格；第一列为一列多行的表格；剩下就是一个表格了。然后把这些表格都放在一个div里面，并设置其样式追问只能用一个表格。请提供源码。谢谢~！ 参考技术B相当于Excel的冻结。CSS不能实现这样的功能，尤其当... 查看详情

带有左+右大写和中间图案的 UIButton

...ern【发布时间】：2012-08-0608:07:49【问题描述】：如何创建一个UIButton，其背景图像由以下人员组成：一个固定的左帽一个固定的右帽许多中间图像一个接一个地放置以填满所有可用空间像下面的例子一样？编辑：我没有意识到在... 查看详情

WPF 中的填充（左、上、右、下）

...bottom)inWPF【发布时间】：2011-03-2013:33:53【问题描述】：我想要的是一个带有一点左右填充的按钮。我可以将MinWidth设置为某个val，但如果要更改Content可能还不够。<ButtonMinWidth="75"Padding="2"Content="Itspeaks!"/>是否可以在WPF中模拟... 查看详情

不是从左到右输出吗？(代码片段)

因此，我的教授给出了一个作业，他给出了main（）函数。我们将为其提供类以产生类似的输出。我尝试了很多代码，但找不到答案。当教授给我他的答案时，我似乎听不懂。这是问题，创建一个程序来显示三个形状的参数，即... 查看详情