带固定列的Html表格

我想让我的表格的前3列固定，以便它们在水平滚动时始终显示。但是，他们需要移动垂直滚动时带固定列的Html表格

我做了一个excel表格有什么需要做的： enter image description here

.headcol { 
     position:absolute; 
     width:5em; 
     left:0; 
     top:auto; 
     border-right: 0px none black; 
     border-top-width:3px; 
     margin-top:-3px;

与scrollTop的右侧滚动条的jQuery如此我移动黄色单元格的最高值。

目前的问题是，当我用数据库填写html表格时，黄色单元格显示即使我的溢出是“滚动”，因为它们是绝对的。

参见下图： enter image description here

任何方式来解决这个问题。让他们隐藏起来？

或任何其他解决方案，我有什么做的，将不胜感激

来源

2014-11-04 Ecnerwal

我在同一件事跑了一次，我结束了如此热烈，我决定用3个表：1的头1，固定列1，可滚动列1，全部用不同的属性包装在div上。 – 2014-11-04 18:43:37

我宁愿将它保存在一张表中，因为我将该表格发送给一个带有表格并将其导出为excel，word，pdf的函数。 – Ecnerwal 2014-11-04 18:48:29

不知道这是否可能与您当前的HTML结构..你有没有想过使用插件？ jQuery中有很多很好的数据表类型插件。例如，http://stackoverflow.com/questions/5622716/choosing-a-jquery-datagrid-plugin – 2014-11-04 18:52:09

您可以使用JQUERY滚动功能并以相反的方式移动要“冻结”的列。您还需要设置z-index，使列保持在其他列上。

在你的CSS：

.frezedCell 
{ 
    z-index: 1000; 
    position:relative; 
}

在你的页面：

$(document).ready(function() { 
    $(".divTableParts").scroll(function() { 
     var divTable = $(".divTableParts"); 
     $(".frezedCell").css("left", 0 + divTable.scrollLeft()); 
    }); 
});

来源

2014-11-04 20:06:09 Radek

试过了，它在谷歌浏览器中的作用像一个魅力，但IE浏览器刷新缓慢，所以它滞后，但它做我想做的事情。接受:) – Ecnerwal 2014-11-04 20:42:39

您可以使用数据表吧：https://datatables.net/extensions/fixedcolumns/

基本上你得的数据表，因为它是依赖和使用这段代码：

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
     "scrollY": "300px", 
     "scrollX": "100%", 
     "scrollCollapse": true, 
     "paging": false 
    }); 
    new $.fn.dataTable.FixedColumns(table); 
});

来源

2014-11-04 19:55:21 Xeli

带固定列的Html表格

回答

相关问题