風格浮動表頭

所以我一直在努力完成浮動表頭的工作。不幸的是，我不能使用像floatThead jQuery library這樣的東西，因爲我需要在您滾動表格時將鼠標懸停在不同的行上，所以我提出了基於各種其他答案的自己的解決方案。風格浮動表頭

但是，問題是，浮動頭的樣式不匹配非浮動頭的樣式，我不知道爲什麼這是或正確的方法來解決這個問題。

這是一個jsFiddle說明我目前的代碼。問題是具有不同列的第一個浮動標頭與非浮動標頭的大小不匹配，即使它們都具有百分比寬度（合計爲100％）。

重要的javascript：

var persist = $(".persist-area"); 
var z_index = 900; 
var count = 0; 
persist.each(function() { 
    var el = $(".persist-thead>tr", this); 
    el.before(el.clone()).css({"width": el.width(), "top": "0px", "z-index": "899"}).addClass('floating-thead'); 
    $(".persist-header", this).each(function() { 
     var clone = $(this); 
     clone.before(clone.clone()).css({ 
      "width": clone.width(), 
      "top": (0 + el.height()) + "px", 
      "z-index": "" + z_index 
     }).addClass("floating-header").removeClass("persist-header").attr('id', 'floating-header-' + count); 
     z_index++; 
     count++; 
    }); 
});

和CSS：

.floating-thead, 
.floating-header { 
    position: fixed; 
    top: 0; 
    visibility: hidden; 
} 

.floating-thead > td, 
.floating-header > td { 
    display: inline-block; 
    text-align: center; 
}

來源

2016-09-23 MasterOdin

你的麻煩是浮置行中的細胞是display: inline-block，這意味着元件之間的空白，對所呈現的輸出的效果。

更多關於如何在this answer（tldr：標準解決方法選項：刪除標記中的空白（簡單），不要提供結束標記（明顯不好的做法，潛在的風險），或使字體大小對於父元素0，然後指定單元格的正確字體大小）

就你而言，你可以使它們成爲display: table-cell（就像非浮動行的單元格一樣）。

來源

2016-09-23 17:04:20 henry

謝謝，這有幫助。我還需要在滾動事件中將寬度設置爲px（而不是使用'％'）來使所有內容排列起來。 – MasterOdin

風格浮動表頭

回答

相關問題