修復了具有可變寬度的標題/可滾動表

Question

我意識到這個問題在Stack Overflow上有很多問題; 然而，在仔細研究了其中一些之后，我相信我的問題還有一個要求。 我想將一個常規的html表轉換為一個可以垂直和水平滾動的表，而標題仍保留在頂部。 該表的寬度超出了頁面的寬度，因此我需要在滾動表時水平移動標題。 我更喜歡使用純CSS方法; 但是，如果有必要，我會使用Javascript。 還沒有找到解決所有這一切的解決方案。

Answer 1

此解決方案可能適合您，具體取決於標題的樣式。 這是純CSS。 http://salzerdesign.com/blog/?p=191

Answer 2

你為什么不只是使用a並設置高度和寬度以允許溢出。 然后只需將桌子放在那里就可以了。

對我而言，這似乎是最合乎邏輯且最簡單的方法......

Answer 3

你可以使用JQuery在幾行代碼中執行此操作，你可以看到我的其他帖子創建一個帶有修復標題和可滾動體的表

使用可滾動的主體創建表

之后讓我們想象你有一個div為類名=“Top1”的標題和一個div為類名=“Top2”的主體，你可以將一個滾動綁定到另一個

$('.Top2').bind('scroll', function(){
  $(".Top1").scrollLeft($(this).scrollLeft());
});

$('.Top1').bind('scroll', function(){
  $(".Top2").scrollLeft($(this).scrollLeft());
});

jsFliddle演示

Answer 4

這是一個很好的jQuery插件，適用於所有瀏覽器！ （查看演示）

結果是一個帶有固定標題的表，僅垂直滾動（暫時...），但寬度可變。

我開發這個插件，以滿足固定標題+靈活寬度的問題。

檢查一下： https ： //github.com/benjaminleouzon/tablefixedheader