滚动时如何锁定表格的第一行和第一列,可能使用JavaScript和CSS？

Question

当您激活"冻结窗格"时,如何创建一个锁定第一行和第一列的表(如在Excel中)？我需要表格水平和垂直滚动(存在很多解决方案,但只允许垂直滚动).

因此,当您向下滚动表格时,第一行将保持不变,因为它将具有列标题.thead无论是什么使得解决方案变得更容易,这可能最终都会出现,或者可能不会出现.

向右滚动时,第一列保持不变,因为它保存行的标签.

我很确定单独使用CSS是不可能的,但有人能指出我的JavaScript解决方案吗？它需要在所有主流浏览器中工作.

Answer 1

哦,好吧,我查找了带有固定列的可滚动表,以了解这个特定要求的需要,你的问题是其中一个没有接近答案.

我回答了这个问题大型动态大小的html表,带有固定的滚动行和固定滚动列,其灵感来展示我作为插件的工作https://github.com/meetselva/fixed-table-rows-cols

该插件基本上将格式良好的HTML表转换为具有固定表头和列的可滚动表.

用法如下,

$('#myTable').fxdHdrCol({
    fixedCols    : 3,       /* 3 fixed columns */
    width        : "100%",  /* set the width of the container (fixed or percentage)*/
    height       : 500      /* set the height of the container */
});

您可以在此处查看演示和文档

Answer 2

我用以下组合来做到这一点：

• 使用多个表
• 固定大小的单元格
• jQuery 的 scrollTop 和 scrollLeft 函数

这是一个jsfiddle 示例来演示。

尚未在所有浏览器上进行测试，但我想它在较旧的 IE 版本上不是很好。

$("#clscroll-content").scroll(function() {
    $("#clscroll-row-headers").scrollTop($("#clscroll-content").scrollTop());
    $("#clscroll-column-headers").scrollLeft($("#clscroll-content").scrollLeft());
});

$("#clscroll-column-headers").scroll(function() {
    $("#clscroll-content").scrollLeft($("#clscroll-column-headers").scrollLeft());
});

$("#clscroll-row-headers").scroll(function() {
    $("#clscroll-content").scrollTop($("#clscroll-row-headers").scrollTop());
});

.clscroll table {
    table-layout: fixed;
}

.clscroll td, .clscroll th { 
    overflow: hidden;
}

.corner-header {
    float: left;
}

.column-headers {
    float: left;
    overflow: scroll;
}

.row-headers {
    clear: both;
    float: left;    
    overflow: scroll;
}

.table-content {
    table-layout: fixed;
    float: left;
    overflow: scroll;
}

.clscroll td, .clscroll th { 
    width: 200px;
    border: 1px solid black;
}

.row-headers, .table-content {
    height: 100px;
}

.column-headers, .table-content, .table-content table, .column-headers table {
    width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clscroll corner-header">
  <table>
      <tr>
          <th>&nbsp;</th>
      </tr>
  </table>
</div>
<div class="clscroll column-headers" id="clscroll-column-headers">
  <table>
      <tr>
          <th>Bus</th>
          <th>Plane</th>
          <th>Boat</th>
          <th>Bicycle</th>
      </tr>
  </table>
</div>
<div class="clscroll row-headers" id="clscroll-row-headers">
  <table>
      <tr>
          <th>Red</th>
      </tr>
      <tr>
          <th>Green</th>
      </tr>
      <tr>
          <th>Blue</th>
      </tr>
      <tr>
          <th>Orange</th>
      </tr>
      <tr>
          <th>Purple</th>
      </tr>
      <tr>
          <th>Yellow</th>
      </tr>
      <tr>
          <th>Pink</th>
      </tr>
      <tr>
          <th>Brown</th>
      </tr>
  </table>
</div>
<div class="clscroll table-content" id="clscroll-content">
  <table>
      <tr>
          <td>Red Bus</td>
          <td>Red Plane</td>
          <td>Red Boat</td>
          <td>Red Bicycle</td>
      </tr>
      <tr>
          <td>Green Bus</td>
          <td>Green Plane</td>
          <td>Green Boat</td>
          <td>Green Bicycle</td>
      </tr>
      <tr>
          <td>Blue Bus</td>
          <td>Blue Plane</td>
          <td>Blue Boat</td>
          <td>Blue Bicycle</td>
      </tr>
      <tr>
          <td>Orange Bus</td>
          <td>Orange Plane</td>
          <td>Orange Boat</td>
          <td>Orange Bicycle</td>
      </tr>
      <tr>
          <td>Purple Bus</td>
          <td>Purple Plane</td>
          <td>Purple Boat</td>
          <td>Purple Bicycle</td>
      </tr>
      <tr>
          <td>Yellow Bus</td>
          <td>Yellow Plane</td>
          <td>Yellow Boat</td>
          <td>Yellow Bicycle</td>
      </tr>
      <tr>
          <td>Pink Bus</td>
          <td>Pink Plane</td>
          <td>Pink Boat</td>
          <td>Pink Bicycle</td>
      </tr>
      <tr>
          <td>Brown Bus</td>
          <td>Brown Plane</td>
          <td>Brown Boat</td>
          <td>Brown Bicycle</td>
      </tr>
  </table>
</div>

Answer 3

将表的实际“数据”放入其自己的 div 中的解决方案怎么样overflow: scroll;？然后浏览器将自动为您不想锁定的“表格”部分创建滚动条，并且您可以将“表格标题”/第一行放在该部分的上方<div>。

但不确定水平滚动如何工作。