向左或向右滚动时在固定表上有垂直滚动但没有水平滚动

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（表格+标题）并且标题也移动

布局：

<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 方法的名称。虽然用法可能会有所不同，但最好避免为不同的事物使用相同的名称。