Question

我已经看到了无数可冻结表的解决方案，这些表是可滚动的例如：

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/

Answer 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，您可以检测主体的滚动（或对于溢出的容器，其工作原理相同），并在跨度上应用负 transform:translateY属性。 / p>

$(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/

CSS使用水平滚动冻结表的第一列。滚动在HTML页面的正文上

1 个答案: