帶固定列的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表格

回答

相關問題