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方法的名称。虽然使用可能会因为调用其中一个而有所不同，但最好不要为不同的事情避免使用相同的名称。

当向左或向右滚动时，具有垂直滚动但在固定桌上没有水平滚动

2 个答案: