向左或向右滾動時，固定桌子上有垂直滾動但沒有水平滾動

Question

我有一個html固定設計，它具有一個中心對齊的表，該表提供了可在垂直和水平方向滾動的巨大數據。 對於垂直滾動，我克隆了表頭並將其放在報表表上方的新固定表中（借助於jquery clone（）和append（）函數以及CSS固定位置），當用戶滾動垂直報告，那么他仍將能夠看到列標題。 現在的問題是，當他向右滾動時，固定表也會滾動，因此標題不與列對齊，我該如何以水平滾動不會使固定表也滾動的方式制作新的固定表在右邊。 固定表將其父級作為瀏覽器窗口。 我有一個jsfiddle示例，但是在此示例中沒有滾動顯示時，無法顯示標題，在我的網站中，當有垂直滾動時，它會顯示http://jsfiddle.net/wnxJ4/8/

var tableOffset = $("#table1").offset().top - 10;
var $header = $("#table1 ").clone();
var $fixedtablehead = $("#fixedtablehead").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();
    if (offset >= tableOffset && $fixedtablehead.is(":hidden")) {
        $fixedtablehead.show().css({width: $('#table1').width()});
    }
    else if (offset < tableOffset) {
        $fixedtablehead.hide();
    }
});

我正在嘗試為水平滾動實現以下代碼，但無法正確解決

var position = $(window).scrollLeft();
var lef=$('#fixedtablehead').offset().left;
   alert(lef); 
   alert(lef-position);
   $('#fixedtablehead').css('left',lef-position-position);

Answer 1

我認為您需要將表和標題放在一個div中，將該div放在另一個具有滾動條的div中，並將該div固定在一個位置，標題應絕對位於頂部，然后滾動時，整個滾動div（table + header）並且標題也移動

布局：

<div> <-fixed
  <div> <-scrollable
    <table> <-header
    <table> <-content

http://jsfiddle.net/bba5g/

編輯：您應該只在具有垂直滾動的div內有內容表，以便您可以滾動內容

Answer 2

JSFiddle在這里看看。

也許這種類型的結構可能會有所幫助。

HTML：

<div id='wrapper'>
    <div class='header'>
        <table class='table'>
            <tr>
                <th>Header1</th>
                <th>Header2</th>
                <th>Header3</th>
            </tr>
        </table>
    </div>
    <div class="scrollable">
        <table>
            <tr>
                <td>TD1</td>
                <td>TD2</td>
                <td>TD3</td>
            </tr>
            <tr>
                <td>TD1</td>
                <td>TD2</td>
                <td>TD3</td>
            </tr>
            <tr>
                <td>TD1</td>
                <td>TD2</td>
                <td>TD3</td>
            </tr>
            <tr>
                <td>TD1</td>
                <td>TD2</td>
                <td>TD3</td>
            </tr>
        </table>
    </div>
</div>

CSS：

.scrollable {
    overflow: scroll;
    height:50px;
    background:#ccc;
}

我仍然不確定這是否是您要找的東西，但是如果沒有幫助，請發表評論。

在命名變量時也要小心，您正在使用變量offset ，這也是jQuery方法的名稱。 盡管調用一個或另一個的用法可能有所不同，但是始終最好避免為不同的事物使用相同的名稱。