CSS 冻结了带有水平滚动的表格的第一列。滚动位于 HTML 页面的主体上答案

【问题标题】：CSS frozen first column of a table with a horizontal scroll. Scroll is on the body of an HTML pageCSS 冻结了带有水平滚动的表格的第一列。滚动位于 HTML 页面的主体上
【发布时间】：2019-03-19 15:55:29
【问题描述】：

我已经看到了无数的解决方案，用于具有可滚动的冻结列的表格例如：

how do I create an HTML table with fixed/frozen left column and scrollable body?

但我所追求的是让滚动出现在页面（正文）上，而不是表格或表格周围的容器上。

编辑- 它只是一个基本的 HTML 表格，太大而无法完全显示，所以有一个水平滚动。在页面主体上进行水平滚动的原因是用户不必滚动到页面底部就可以水平滚动。

        .stickyCol2 tr th:nth-child(1),
        .stickyCol2 tr td:nth-child(1){    
          position: absolute;
          width: 50px;
          left: 15px;
          top: auto;  
          background-color: #fff;
        }

        .stickyCol2 tr th:nth-child(2),
        .stickyCol2 tr td:nth-child(2){    
          position: absolute;
          width: 60px;
          left: 86px;
          top: auto;  
          background-color: #fff;
        }

 <div class="stickyCol2">
            <table>
               <thead>
                  <tr>
                     <th>item 1</th>
                     <th>item 2</th>
                     <th>item 3</th>
                 </tr>
              </thead>
              <tbody>        
                 <tr>
                   <td>item 1</td>
                   <td>item 2</td>
                   <td>item 3</td>
                </tr>
             </tbody>
         </table>
         </div>

js 小提琴 https://jsfiddle.net/uthz6c24/1/

【问题讨论】：

请附上您的 html 和 css 代码，以便我们更好地为您提供帮助
只是不要将表格限制为 100% 宽度，然后你的身体就会滚动（这也意味着你的身体会更宽，但不清楚你想要什么）。请使用tour 的help centre 来查看how to ask a good question。
但听起来你所追求的东西是不可行的——如果你想在你的身体上有一个滚动条，你的桌子需要比你的身体更宽。也许您可以使用 js 克隆第一列并将其放置在左侧固定位置的 div 中，但随后您会遇到需要循环所有单元格并确保它们的高度与主表匹配的正确高度和还将克隆列的垂直滚动与主表匹配。我要问的一个问题是为什么将卷轴移动到正文 - 这真的很糟糕的用户体验
#Amiratak88 我已经添加了代码，在我的示例中还有更多列。
#pete 我没有将表格限制为 100%，我可以将它包围在一个容器中并在那里有滚动条，前两列被很好地冻结，但这意味着用户必须滚动滚动到页面底部，然后才能滚动查看信息。这就是我试图避免的。我的表比它有 30 多列的正文要宽得多，我的示例仅显示我使用的代码。我认为您可能是正确的，因为 CSS 无法实现，而必须使用 JavaScript 来代替

标签： html css css-tables

【解决方案1】：

以下是一些工作代码以及可用于微调解决方案的说明。

主要思想是将要固定的列的内容包装在 span 元素中，您将其固定在屏幕的左侧（使用 CSS）并赋予它们等于其内容的宽度（我使用我的代码中只有一列）。

var cellWidth=$('th:first-child').width();
$('th:first-child, td:first-child').each(function() {
  $(this).wrapInner('<span></span>');
  $(this).find('span').attr('style', 'width:'+cellWidth+'px;');
})

您将margin-left 添加到表中，等于固定列的总宽度（如果必须，您必须使用 Javascript 计算），这样固定列不会与可滚动单元格内容重叠。

$('table').attr('style', 'margin-left:'+cellWidth+'px;');

之后，使用 jQuery，您可以检测 body 的滚动（或者对于溢出的容器，工作方式相同）并在 spans 上应用 negative transform:translateY 属性。

$(window).on('scroll', function() {
  var scr = -$(this).scrollTop();
  console.log(scr);
  $('th:first-child span, td:first-child span').css('transform', 'translateY(' + scr + 'px)');
})

这是一个有效的小提琴，希望它能给你最初的提升。 https://jsfiddle.net/scooterlord/ndxjg1b0/21/

【讨论】：